Question

I’ve been working on my website and I’m using font squirrel to generate some web fonts for the website, but currently I’ve this differences:

Google Chrome OSX

Google Chrome Windows

Firefox OSX

Firefox Windows

Internet Explorer

Is there a way I can “hack” the fonts under windows so they will look more the ones under OSX? Thank you.

Answer 1

Different systems render fonts differently. There is mostly nothing you can do about it. You can just live with it: check that on major systems (Windows, Mac, Linux, maybe some mobile systems too) the rendering is acceptance. They cannot and need not be the same. But if you get unacceptable results on some platform, change the font (though sometimes just changing font size, maybe even 1px larger, may help).

The issue is described e.g. at http://www.owlfolio.org/htmletc/legibility-of-embedded-web-fonts/ and in much more detail (and more technically) at http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

In principle, though, differences might also be caused by different typographic settings. Firefox nowadays applies kerning and common ligatures by default, other browsers don’t. But you probably won’t see such effects, for two reasons: free fonts usually don’t have ligatures or kerning pairs, and Lorem ipsum text usually does not contain character pairs where they would matter (e.g., “fi” or “To” or “Va”). Anyway, the typographic settings can be affected to a considerable degree using the CSS property font-feature-settings (or, rather, that property with various browser prefixes).