'HTML/CSS - Google Font Fira Sans rendering

My page designer sent me his work including Fira Sans google font. So I have a bad rendering on my laptop, and on my pc in the office.. but it's good in my pc at home.

All have installed Windows 7. I'll show you the screens from google fonts webpage.

This is the rendering in Firefox:

This is the rendering in Firefox

No matter if I use @font-face or @import or I add it in a <head> tag.. results are always the same. So I wonder if I have it on 2 out of 3 machines.. what about other users. Should I quit this font?

Did anyone else experienced something like this before?

UPDATE: This is the rendering from Joel's snippet Joel's snippet

htmlcssfontsgoogle-webfonts


Solution 1:[1]

You must load it as link rel.

*{font-family: 'Fira Sans', sans-serif;}
.bold{font-weight:bold;}
.italic{font-style: italic;}
.oblique{font-style: oblique;}
<link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet">

<p><span class="bold">when you import a font </span> by CDN it will be loaded in client side on page loads, so no matters what device is loading it. Maybe you are <span class="italic">not linking it well</span> or you're working on local machine or <span class="oblique">localhost and it</span> causes some issues. On a server must work fine.</p>

EDIT Screenshots: enter image description here

enter image description here

enter image description here

enter image description here

Solution 2:[2]

Ok, I've found the same font from mozilla cdn.

<link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">

it works great also on other browsers. I've also found out that Google Fonts team is still working on Fira Font, so until then I'll be sticking to mozilla version.

For @font-face you can download the package from github https://github.com/mozilla/Fira/releases/tag/4.202

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
Solution 2 Denimen9

Related Questions