Problem with word rendering on Firefox and Edge with Jura font, font-weight 700

[HonkingGoose]

The string "Oil refining" in the <h5> header is rendered wrong.
The i blends in with the preceding letter f. It almost looks as if the i is hiding behind the f. 😄

I think the_Jura_ sans-serif font that's used for the <h5> header is causing this. When I toggle the Jura font off for the <h5> in Firefox Inspector, and use the default Times New Roman font the problem goes away.

The issue is also way better (but not completely fixed) when the font-weight is changed from 700 to 500.

I've checked the Jura font on Google fonts, and it has the same problem there with the string "Oil refining", but with black text on white background the problem is less noticeable, than with orange on black.

https://fonts.google.com/specimen/Jura?preview.text=Oil+refining&preview.text_type=custom

I'm using the Firefox browser on Windows 10.

[deniszholob]

Interesting, chrome is ok, but ff and edge do that...ughh, maybe ill pick a new font later -_-

[HonkingGoose]

Yeah browser display differences are no fun to deal with.

Just wanted to put the bug out there so that you're aware of it. Sorry for getting you extra work! 😄

[deniszholob]

NP, I appreciate all the findings! I can figure out the priority of things to fix and whatnot haha.

[pandalion]

Hi, I have found the issue. You are including a link to Jura (<link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet" type="text/css">) , but if you click on this link you will see it only includes the 400 weight of the font.

When you have bold headings, the browser is just guessing and making the webfont bold itself, but this can cause issues, such as the one you are seeing in Firefox. To fix this, we just need to specify the other weights of Jura to be loaded, and then the webfont for weight 700 will be used :) e.g.

<link href="https://fonts.googleapis.com/css2?family=Jura:wght@400;700" rel="stylesheet" type="text/css">

I will make a PR for the fix now!