CODEWITHSUNDEEP
htmlcssfontswebfonts
ofer dofer
ofer dofer

Reputation: 621

Google Webfonts and Anti-aliasing

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?

Upvotes: 7

Views: 12421

Answers (3)

meduz'
meduz'

Reputation: 618

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:

Hope I could help. :)

Upvotes: 4

Mathew
Mathew

Reputation: 178

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.

Upvotes: 6

Stuart
Stuart

Reputation: 1168

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!

Upvotes: 2

Related Questions