Strange Issue while Google Font Rendering

Asked 19/12, 2014 at 15:0 Answered 18/10, 2018 at 10:22

So I am using the fonts this way

<link href='http://fonts.googleapis.com/css?family=Fira+Sans:700|Open+Sans&text=1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%20' rel='stylesheet' type='text/css' />
<style>h1, h2, h3 {font-family: 'Fira Sans', sans-serif; line-height:1.125em} </style>

This is the result... enter image description here

I am completely confused as how this can even happen? What am I doing wrong. The issue seems only on the home computer. Rest everywhere I checked its fine.

Home PC: Firefox, Windows 7 (In chrome the fonts are not displaying at all, its blank)

Hermie answered 19/12, 2014 at 15:0 Comment(10)

Do you have a live project we can test? – Greaser 19/12, 2014 at 15:1

stylegirl.in @BramVanroy – Hermie 19/12, 2014 at 15:3

have you tried highlighting/copying the "bad" text on the home computer and copy/pasting it elsewhere? If the missing chars show up in the copy/pasted text, then it's a display issue. – Brusa 19/12, 2014 at 15:3

What is with the text=1234... querystring in that CSS link? Why not just pull back the whole font library? Try removing everything from the & to the end of the link to see if that helps. – Sartin 19/12, 2014 at 15:6

@JoshBurgess but if its that issue then it will be in all places not in one scenario.... – Hermie 19/12, 2014 at 15:7

Works fine on Chrome, FF and IE on my Surface Pro 3. – Greaser 19/12, 2014 at 15:20

@BramVanroy Same for me... I am baffled... How can only my home PC cause this issue ? – Hermie 19/12, 2014 at 17:2

Post sufficient code (HTML and CSS) that actually reproduces the issue. – Cage 19/12, 2014 at 17:41

@DebajyotiDas can you post the specs of your home PC, e.g. CPU, GPU, etc.? – Terrazas 19/12, 2014 at 19:9

See also on Google’s GitHub: FiraSans and FiraMono appear blank – Daryl 8/11, 2016 at 22:4

Try using Mozilla's CDN instead of Google's; the latter seems to be buggy with regards to the Fira Sans font.

Replace your googleapis.com link with this one and it should work:

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

You might have to still use Google's CDN for Open Sans, in addition to Mozilla's for Fira Sans, but Open Sans doesn't seem to have this issue as far as I am aware of.

Dnieper answered 12/2, 2015 at 13:20 Comment(3)

Works fine when rendered from Moz – Hermie 12/2, 2015 at 15:46

Is there a way of limiting which weights you bring in? – Min 14/3, 2016 at 11:45

I have been using Fira sans for months and I just recently found out that 1 person fails to see the text. I wonder how many visitors in the meantime I have lost because of this... Anyway, how do I test it if it works now? – Gradeigh 12/4, 2016 at 16:3

Do you have any custom settings in your GRAPHICS driver config? E.g. is Anisotropic Filtering, Antialiasing / etc. turned on? Firefox tends to pass some of those optimizations through, with bad results :-/

Try turning all of those settings to "Application-controlled" / auto / default whatever and see if that makes a difference.

Terrazas answered 19/12, 2014 at 15:13 Comment(2)

Not an answer. Should have been posted as a comment. – Cage 19/12, 2014 at 17:41

The sentence "Try turning all of those settings..." is an answer. It may not be THE answer, but it is an answer. – Terrazas 19/12, 2014 at 19:6

I was having this issue. The cause was a misconfiguration of the time and date information in my computer. Once I adjusted that, google fonts started to work fine.

Brasilein answered 18/10, 2018 at 10:22 Comment(0)

Recommended topics

Hot tags