1

[Problem] -- I am having a problem with web fonts rendering on a specific computer, other computers in my house render the text fine (same OS and browser versions). They look really bad and pix-elated I know all about differences between how browsers render things differently but its not supposed to look this bad.

[What I've Tried] -- I tried prioritizing the .svg in my CSS first on my site to fix it on Google Chrome but it did not help. I installed Firefox and discovered it too does not render the Open Sans font correctly either. I also have tried clearing my cache (I have a cache clearing plugin) and opening in a incognito window thinking a chrome extension was causing a problem but no difference. From the screen shot it appears Chrome at least renders the larger "Open Sans Condensed" but the smaller text is pixelated. Its weird a fresh install of FF also has the same problem as Chrome. Also tried downloading the font files from Google Fonts and installing them locally, no difference.

IE 11 renders the text correctly. I need trouble shooting ideas..

The screen shot below is from the official Google Fonts website located here http://www.google.com/fonts/specimen/Open+Sans#pairings so it should rule out any bad coding on my own page. The open sans font on fontsquirrel loads correctly and its not pix-elated.

Here is what I see and I don't think the fonts should look that pixelated... https://i.stack.imgur.com/4lhns.jpg sorry too low rep to post images :(

NickStees
  • 449
  • 4
  • 12

2 Answers2

1

Each browser loads the fonts using different formats. Usually you would use font-face with the four different types, EOT, WOFF, SVG AND TTF. You can use the Font Squirrel site to load your font and spit out the four different versions. Also, take a look at Google font embedding which takes care of the the work (although they will look slightly different in different browsers)

hs2323
  • 21
  • 2
  • Well the screen shot I uploaded was directly from the Google Font embedding website so it should have all those fall back font formats. – NickStees Apr 05 '14 at 17:15
  • Did you happen to install the font locally to the machine before you tried the Google Font embed? I am trying to figure out what you meant by "tried loading the .svg first." – hs2323 Apr 05 '14 at 21:37
  • hs2323 - On my own website I re-ordered the @Font CSS .svg to load before the others as explained here http://stackoverflow.com/questions/14438368/prioritise-svg-font-with-google-web-fonts as a trouble shooting method. – NickStees Apr 07 '14 at 03:05
0

The problem ended up being that my Windows 7 machine did not have cleartype enabled. See this post to see how to enable it http://www.howtogeek.com/howto/28790/tweak-cleartype-in-windows-7/

NickStees
  • 449
  • 4
  • 12