[Solved] Google Font rendering poorly

[Josiahmann]

Hello everyone,

I have the google font Quicksand installed on a site at http://www.johiggins.com. It is showing up poorly in Chrome on PC (images here and here) and I’m not sure why. It is not an option to have it displaying poorly on certain browsers. Is there anything I could do differently to make sure it renders?

Bonus points… Since I dont have a PC how do I check for PC browser compatibility?

[Jon Whipple]

Josiah, I have run into the same problem. I am having the trouble in both Firefox and Chrome on Windows (but not all Chromes on all Windows). IE(8—10) are doing great. All browsers render super on my Mac. Haven’t tested anything on Linux.

From what I can gather: Windows has different font rendering technologies built in, and an application such as a browser can select which one to use. There are (unsurprisingly) a multitude of application/rendering engine combinations because of this. And to make it even better: the file types that Google serves up can also make things different too.

I have tested various things including messing with the settings in Firefox often recommended on Firefox fora (but not something I can do to support a wide public audience in the project I am working on), and also the type display settings in Windows (ClearType etc.).

The most promising avenue I have found, centres on downloading the google font files, converting them to the necessary file types, and serving them up from my own host. In my tests, all fonts, not just Google web fonts, were not displaying nicely using TrueType or OpenType but as soon as I made an OpenType font file with Postscript outlines things rendered great in all the browsers.*

This article outlines the process and mentions tools you will need: http://blog.wax-o.com/2012/11/font-face-rendering-problem-in-chrome-and-firefox-use-postscript-outlines/

Bonus points I use VMWare Fusion (some people swear by Parallels) running Windows 7, and I also use http://browserstack.com. When using browserstack you can set the view to render in high detail which is a pretty good representation of what’s happening on screen but takes a little time to draw.

Super bonus points Try the free accounts at TypeKit, fonts.com/webfonts, and WebType http://www.webtype.com, read about and take a look at others http://www.hongkiat.com/blog/webfont-comparison/, http://www.smashingmagazine.com/2010/10/20/review-of-popular-web-font-embedding-services/, and http://webdesign.tutsplus.com/articles/typography-articles/web-font-services-the-good-the-bad-and-the-ugly/

*I downloaded a google webfont and made a test HTML page. I installed the downloaded font in Windows on my VM. I loaded the test page. The page rendered using the font. It looked horrible. I then made a copy of the font and converted it into a OpenType with Postscript outlines font. I reloaded the test page. Looks great. I still need to try converting the font to EOF and WOFF files using the OT-Postscript font as the source and then place all on webserver and hit it with a bunch of different browsers…

[Josiahmann]

That is extremely helpful. I ended up going with a different font for now, but I’ll definitely keep this in mind. Thank you for the reply Jon

[Author]

Posts