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

Fonts render differently based on:

• Screen/Monitor resolution
• Browser
• Operating System
• Size of use and hinting

Based on the fact that your fonts look worse in Chrome and Firefox the only thing you can do to try and get those browsers to render them better. Without seeing your code the only things I can recommend are:

• Making sure you are using decent reset css (something like this: http://meyerweb.com/eric/tools/css/reset/).

• Try adding font-weight: normal; to fonts to see if this makes a difference; sometimes browsers and frameworks try adding a fake bold to things.

• Assuring you are using the actual versions of the fonts and not just applying CSS styles.

• If all else fails then try bumping the font-size up/down a small amount and see if the font hints better at these sizes.

Hope this helps!

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

Answer 3

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.