EDIT: i made a video to present the issue. Find it here:

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 pletely 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=".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.

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

EDIT: i made a video to present the issue. Find it here: https://streamable./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 pletely 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./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./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

• javascript
• html
• css
• linkedin-api
• badge

• 1 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! – Nick J Commented Jun 3, 2021 at 21:47
• 1 Same problem This user had? but that was a month ago. There is also a workaround mentioned. – James Commented Jun 3, 2021 at 23:38
• 1 I am kind of relieved to see that im not the only one. Thanks for sharing! – Nick J Commented Jun 4, 2021 at 23:28
• Did you resolve this? I still have exactly this issue. – GetShifting Commented Oct 13, 2021 at 18:45
• 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 – yhu420 Commented Sep 8, 2023 at 23:25

7 Answers 7

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 e 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./r8sl85

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.

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./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... */

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.

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.

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.

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./sc/h/2lgytu9f1z9n54epparouqzhy">
    
    ...
         </div>
    </template>
 </div>

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