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

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.

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

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