Webfont Best Practices

[mjf]

I’ve recently started to notice how bad Windows is at dealing with webfonts and then the sigh of relief when moving back to my Mac, or even my phone (Android). I haven’t done too much research on the subject but are there any really good options to dealing with the issue?

So far I’ve found that on XP they turn off ClearType by default and I haven’t really noticed that big of a difference when turning it on, in browser anyway. The issue isn’t really a browser issue either since it looks the same across Chrome, Firefox, and IE. [This article](http://www.fontspring.com/blog/smoother-web-font-rendering-chrome “http://www.fontspring.com/blog/smoother-web-font-rendering-chrome”) mentions putting SVG up higher in the heirarchy on your font’s css file and it does look better, anybody do anything different/better or advise against this method? The article is a year old so didn’t know if there was new info I’m missing out on.

[chrisburton]

The SVG trick is due to Chrome’s lack of anti-aliasing. Keep in mind that SVG cannot inherit the hinting data that is in the font. Therefore, making text render poorly at small sizes with SVG. My advice, use true high quality web fonts.

ClearType does effect browser rendering. Turn it off and zoom in, now turn it back on and zoom in again.

[Author]

Posts