Question

I was putting together a website using the Comfortaa font from Google Web Fonts. I developed the site locally on OSX, and everything looked fine. When I got around to posting the site online, I discovered it looks awful from a friend's Windows XP computer. Searching around SO it seems that the reliability of the rendering of web fonts is very uncertain, especially on Windows.

My question is, how can you overcome this uncertainty? Must I explicitly test on all OSs, just to be sure? Or are there certain web fonts I should simply avoid? Is there some sort of negative characteristic that I can look for, so I can reject a font without having to do time consuming tests with various OS versions?

Was it helpful?

Solution

The common cause for the ugly rendering of Google Web Fonts seems to be the OS level font-smoothing setting.

Here's an article on how to check this with modernizr:

http://wellcaffeinated.net/articles/2012/01/25/font-smoothing-detection-modernizr-style

The simple fallback could then be using a common font or with a bit more work you could use cufon to render the original font nicely.

OTHER TIPS

While it doesn't directly answer your question, there are common fonts which are generally available on all platforms (albeit not the pretty downloadable web fonts). To ensure absolute compatibility it's best to stick with those. Here's a great resource on that set of commonly available fonts: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top