Still in the lab...
@font-face font rendering improvement in -webkit browsers

Using @font-face is a normal practice nowadays: full browser support, lots of resources to find nice fonts and a marvelous tool like Font Squirrel’s font-face generator to make our life easier.

However, there’s always room for improvement. Sometimes, I’ve noticed a weird font rendering in -webkit based browsers, most of all in Safari, with its fattier font display strategy. With web-safe fonts, you’ll just see the fonts to be fattier and, sometimes, cause you some layout problem, if you were too pixel bound.

When using font-face fonts, especially at small font sizes, the problem becomes serious: your fonts are collapsing into fat, they seem to have been eaten by a rat or run into some other ugly adventure.

To prevent this, try adding this few lines of code to your CSS:

*{
    -webkit-font-smoothing:subpixel-antialiased;
    -webkit-text-stroke:1px transparent;
    text-shadow:rgba(0, 0, 0, .01) 0 0 1px
}

The text-shadow hack works most of all for Chrome; the -webkit-font-smoothing does not affect font-face’d fonts, but is very useful to thin the web safe fonts. The -webkit-text-stroke hack worked for Safari 4, so why not including it for retro compatibility issue?