Google Webfonts and Anti-aliasing

Question

I like to use Google Webfonts on my commerical works, but they render a bit too jagged, though in the preview provided by Google, they render very smooth.

Check this out: http://www.google.com/fonts/specimen/Oxygen

The biggest preview seems very nice and smooth but when I import it on my page and use it, it seems distorted on the edges, very jagged. Does Google use an extra library to achive this anti-aliasing or is it me doing something wrong?

Answer 1

If you uninstall the font from your system (windows/fonts folder), you should be able to see it smooth. To overcome this. Do not use the @import or direct link from google. Rather download the package from www.fontsquirrel.com (the whole web font kit) and use @font-face in your css to get smooth fonts.

Answer 2

I'm not aware about the full technical details, but Chrome may render fonts differently than other browsers.

What you can try is to specify a font-smoothing rule in your CSS file.

p {
    -webkit-font-smoothing: antialiased;
}

This rule is often used. Sometimes, people applies it to every selectors (with *):

* {
    -webkit-font-smoothing: antialiased;
}

The three possible values for this property are:

-webkit-font-smoothing: none;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: antialiased;

Unfortunately, I can't reproduce the smoothing issue right now (I don't know why, my computer doesn't change the smoothing and everything is perfectly readable, maybe a recent Chrome fix but I can't find anything about that).

Further reading on:

• about ClearType & Chrome: on Google forums
• -webkit-font-smoothing demo on Codepen.

Hope I could help. :)