7

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?

5
  • Need some code to tell what is wrong....!! Apr 18, 2013 at 11:22
  • Which font-size you use on your site for this font? Apr 18, 2013 at 11:36
  • Example? Also what operating system, browser and screen are you using? All of these factors contribute to font rendering.
    – Stuart
    Apr 18, 2013 at 11:56
  • 1
    OK, it looks great in IE, but not in Chrome and Firefox. I'm using windows 7.
    – ofer dofer
    Apr 18, 2013 at 12:51
  • Are you able to take a screenshot at all?
    – Stuart
    Apr 19, 2013 at 15:06

3 Answers 3

6

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.

3

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

2

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!

1
  • The 'font-weight: normal;' made a rather big difference in my case on Chrome 31 beta with a custom .woff font. Thanks!
    – Johan B
    Oct 22, 2013 at 19:49

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.