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

Answer 1

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. :)