Making CSS3 @font-face font rendering play nice with ClearType on Windows

Question

First some background information.

It seems that using the CSS3 @font-face rule can interact in unexpected and undesired ways with ClearType font renderingv in any browser, on any version of Windows (XP and above.)

I first documented this as a Google Font Directory bug when I ran into it. Further research seems to yield conflicting information; having ClearType enabled or disabled can either help or hurt how a @font-face font renders in any web browser in Windows. Whether ClearType helps or hurts seems to be totally dependent on the font(s) being used, and what kind of hinting is built into them.

For example, a thread on TypeKit's support site seems to point to font rendering problems when ClearType is DISABLED. However, a jQuery plug-in was developed to improve font rendering when ClearType is ENABLED, but the plug-in only works in Internet Explorer. Interestingly, the font used on the plug-in's demo pages does render poorly when ClearType is enabled, but when it's disabled the two demo pages render identically/correctly.

So given all of that background information and prior research, my question is:

What's the best way/compromise to ensure decent font rendering for modern browsers on all platforms, regardless of Windows ClearType settings?

My first idea was to use stylesheets that include the @font-face fonts by default. JavaScript could detect the user's OS, and if Windows is detected, could programmatically modify stylesheet classes to use font-families that don't include the @font-face fonts so that system-native fallback fonts are used. I realized later that someone else also thought of this. It's a hacky and inelegant solution though. Ideally I want my web fonts to be usable regardless of the platform without relying on something like sIFR or Cufon.

Does anyone have pointers or better ideas?

Answer 1

This is a big issue and is an official bug in Google Chrome since July 2012. In August 2013 this seems to be fixed in MOST cases. However there're still examples where fonts look edgy and pixelated.

Solution:

Give the element a decent text-stroke:

// try around, find the setting that fits your font-size
webkit-text-stroke: 0.6px; 

// alternative RGBa syntax, allows finer settings with alpha-transparency
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.1);

More info:

I've written a big blog article about this topic, including a lot of screenshots and 4 different solutions to fix the issue: Have a look here:

How to fix the ugly font rendering in Google Chrome

Answer 2

Check out this article about pretty much the same thing:

IE7 & 8 font smoothing: http://allcreatives.net/2009/12/05/smoother-font-face-embedding-in-ie-7-8/

There's a lot in the comments about it too. I've been looking for similar supports lately, without much joy. I had to use Cufon on one project cause the client wanted a very particular font. Sometimes, sIFR and Cufon are the only solutions, but honestly, I'd stay away from sIFR.

Hope this helps.

Answer 3

A similar question here: Font-face embedded fonts look fuzzy in Windows 7 browsers got an answer that solved the same issue for me.

The fontsquirrel font generator http://www.fontsquirrel.com/fontface/generator optimizes fonts and adds them with hinting/rendering info that helps the windows font rendering engine render them better. It also generates smaller files, which will download faster.