Javascript destroys Css font style (Linkedin Badge)

Question

EDIT: i made a video to present the issue. Find it here: https://streamable.com/r8sl85

I am implementing my LinkedIn badge on my website. They provide me the code. Whenever I implement it, the badge does work but unfortunately it destroys the font of my entire page. I made a simplified html to present the issue by isolate it from the rest of the unrelated code below.

These two examples have a completely different font when using the same font css file.

    <link rel="stylesheet" type="text/css" href="testStyle.css">
    
    <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
    
    Some Text underneath the Badge <br />
    <i>Another line of text</i> <br />
    <b>Another line of text</b> <br />
    <h1>the last line of text</h1> <br />

Versus:

    <link rel="stylesheet" type="text/css" href="testStyle.css">
    
    <script src="https://platform.linkedin.com/badges/js/profile.js" async defer type="text/javascript"></script>
    <div class="badge-base LI-profile-badge" data-locale="en_US" data-size="large" data-theme="light" data-type="VERTICAL" data-vanity="nick-janse-gis-rastersky" data-version="v1"></div> 

    Some Text underneath the Badge <br />
    <i>Another line of text</i> <br />
    <b>Another line of text</b> <br />
    <h1>the last line of text</h1> <br />

both using the same CSS as following:

html{
  font-family:"Calibri";
}

The differences in the font provided in a screenshot: The screenshot

You can see the effect yourself on my live website, if you switch from pages you can see how the font changes on the 'about me' page when the badge is loaded.

https://rastersky.com/landing?page=aboutme

I think that in the past this all worked perfectly fine, but for some reason it doesnt anymore. I suspect the javascript of linkedin has something to do with this, but still unsure.

I have tried to isolate the badge with css but this did not work:

.LinkedinBadge {
  all: unset;
  isolation: isolate;
}

Can anyone find out why the font is different and how I can solve this issue? Let me know if i need to provide some more details.

Thank you kindly.

Nick Janse

Iene

PS: i can not see my badge at all now anymore. It looks like its down (only for me?) ill let you know once its back up. Maybe their fixing it. I hope! – Iene

Same problem This user had? but that was a month ago. There is also a workaround mentioned. – Percyperdido

I am kind of relieved to see that im not the only one. Thanks for sharing! – Iene

Did you resolve this? I still have exactly this issue. – Tannic

I have the same issue, as a workaround I put my badge into an iframe so that it does not interfere with the rest of the page – Serum

Answer 1

I have opened a support ticket on linkedin yesterday, i was notified that the linkedin API devs on stack overflow are suposed to pick this issue up. I dont like how that works since i dont have a clear timeframe of when a response will come from them, like did they even read it yet?

So if anyone is still interesting in helping. I made a video to present the issue.

https://streamable.com/r8sl85

Iene

Answer 2

I was able to push on LinkedIn support until they resolved the issue. Their engineering team was able to address the bug and have rolled a solution out to production.

Blunge

guess there's a regression then. It changes the default styles for html, body, etc. I guess only real solution is to grab the generated HTML and the applicable CSS styles and embed into your own site. I don't think linkedin can be trusted. If they fix the issue, next day my site changes. no thank you. – Graiggrail

Answer 3

I solved the issue for myself by downloading the profile.js file and linking it from my server.

removing the following

<script src="https://platform.linkedin.com/badges/js/profile.js" async defer type="text/javascript"></script>

and simply linking it

<script src="/js/linkedin/profile.js"></script>

did the trick.

oh, i also removed the 1st line in profile.js

/* Auto generated, hash = 2x... */

Crinoid

Answer 4

I am not sure what the problem is, but maybe you can move the badge rendering to another file, and try to render it from there so it does not interfere.

Also, please try to add the "important" marks to your CSS rules. They may be able to over-rule that which is affecting your font.

Trinh

Can you explain what you mean by rendering it in a different file? – Iene

I found that pretty much everyone is suggesting iframe's. It worked for me but ill keep my support ticket open for LinkedIn. Thanks. – Iene

I have the same issue, I created a react page and when putting the embedded code in my page, it overwrites my css styling completely. – Cystolith

I also tried to put it in a whole different react component, and then import it into my index,js and render it, but it still alters all my css – Cystolith

Answer 5

I have the same issue. Depending on if a user is loggedin on Linkedin and the language setting they are using in linkedin, the styling can be different. It seems to have something to do with an AB test.

I contacted the Linkedin support but after a many messages they notified me the don't give support on implementation of the badge.

Nall

Answer 6

Personally I wouldn't suggest linking anyone's JavaScript that you don't know you can trust. Someone above suggested this was fixed in 2021. Here it is 2023 and I just tried to add my linkedin badge to my personal web site and it loads in a CSS that changes the styles of just about everything (including HTML and BODY). Is this a regression? If they fix it again do I need to worry about my site layout changing randomly some day? No thank you.

My suggestion is try the linked in badge in your developer environment and grab the generated HTML and CSS and strip it down to the bare minimum and add it to your site. Don't call there javascript.

Graiggrail

if you read the js and decide you're comfortable with it, you can at least use developer.mozilla.org/en-US/docs/Web/Security/…. But that assumes that the resource at the URL is stable and will not change- basically- that the URL is versioned. – Farmer

Answer 7

I know I am late to this question, but I just came across this problem too. I solved it by using a local copy of the generated badge HTML and then wrapping it into a shadow dom node to isolate the styles the linkedin badge is loading.

  <div width="400px">
    <template shadowrootmode="open">
      <div width="400px">
        <link rel="stylesheet" href="https://static.licdn.com/sc/h/2lgytu9f1z9n54epparouqzhy">
    
    ...
         </div>
    </template>
 </div>

Works in Chrome, Edge and Brave (only with the shields down)

Sawdust