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 b

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