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...
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)
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.
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.
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.
来源：https://stackoverflow.com/questions/27568591/strange-issue-while-google-font-rendering