How to render thin fonts more smoothly in CSS 3 on Windows?

Question

When I\'ve designed my web site in Adobe Flash Pro CS6, the font looks like this:

Answer 1

text-rendering: optimizeLegibility applies kerning to the font, wich can improve readability, but only if the resolution of the display and font-size is high enough. It doesn't make the font any bolder if it was too thin before.

The problem here could be font-families that have one or more faces that are lighter than normal (font-weight:400) – like Googles Lato.

If you load all light to regular faces of Lato like this

@import url(http://fonts.googleapis.com/css?family=Lato:100,200,300,400);

I made the observation that most Windows browsers and Chrome OSX use font-weight:100 if you specify anything lighter than 400 – (or normal, regular). Changing the font-weight: to 200 or 300 doesn't render any different, although the inspector tools insist the machine is displaying e.g. font-weight:200. Which it isn't.

Removing the lighter weights (100 in my case) solves the problem, and lets me at least use font-weight:200, respectively. Rendering isn't absolutely identical across browsers but similar at least.

@import url(http://fonts.googleapis.com/css?family=Lato:200,300,400);

This of course doesn't solve the actual problem not being able to access light font weights as specified.