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