'Javascript destroys Css font style (Linkedin Badge)

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

javascripthtmlcsslinkedinbadge


Solution 1:[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

Solution 2:[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.

Solution 3:[3]

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.

Solution 4:[4]

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

Solution 5:[5]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nick J
Solution 2 Jeramy
Solution 3 janb
Solution 4 n0mad
Solution 5

Related Questions