Geek Answers Handbook

Google Webfonts and anti-aliasing

I like to use Google Webfonts for my commercial work, but they look too jagged, although in the preview provided by Google they look very smooth.

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

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

+6
source share
3 answers

If you remove the font from your system (windows / fonts folder), you can see it is smooth. To overcome this. Do not use @import or a direct link from Google. Rather, download the package from www.fontsquirrel.com (the entire set of fonts on the Internet) and use @ font-face in your CSS to get smooth fonts.

+4
source

Fonts are rendered differently based on:

  • Screen / Monitor Resolution
  • Browser
  • operating system
  • Usage size and hints

Based on the fact that your fonts look worse in Chrome and Firefox, the only thing you can do to try to make these browsers better. Without seeing my code, I can only recommend:

  • Make sure you use decent reset css (something like this: http://meyerweb.com/eric/tools/css/reset/ ).

  • Try adding font-weight: normal; to fonts to find out if it has changed; sometimes browsers and frameworks try to add fake courage to things.

  • Make sure you use the actual version of the fonts, and not just apply CSS styles.

  • If all else fails, try scribbling a font size up / down a small amount and see if fonts are better for these sizes.

Hope this helps!

+2
source

I don’t know the detailed technical details, but Chrome may display 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 apply it to each selector (c * ):

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

Three possible values ​​for this property:

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

Unfortunately, I can’t reproduce the anti-aliasing problem right now (I don’t know why, my computer does not change anti-aliasing, and everything reads fine, maybe the latest Chrome fix, but I can’t find anything).

Further reading:

Hope I can help. :)

+1
source

More articles:


All Articles