Search code examples
internet-explorerfont-faceantialiasinggoogle-webfonts

@font-face vs Google Web Fonts

I've designed a site using numerous Google Web Fonts. Unfortunately, on WinXP (IE6-8), some fonts seem overzealously anti-aliased, and lose visual definition & clarity. No issues on any other browsers (Safari, Chrome, FF) on IE8 nor on any browsers on MacOSX.

IE8 on WinXP (Over-zealous AntiAliasing)

IE8 on WinXP (Over-zealous AntiAliasing)

Chrome WinXP (Looks Good)

Chrome WinXP (Looks Good)

So I'm considering using the equivalent fonts from fontsquirrel.com. What are the advantages/disadvantages of using @font-face as opposed to Google Web Fonts? So far, from my experimentation, they look much better...

PS. does document.ready() get fired after @font-face fonts are loaded?

Solution

  • There is no difference.

    If you take a look at the back-end of Google Web Fonts, it uses @font-face in exactly the same way that everyone else uses it, including FontSquirrel and its @font-face generator. Nothing magic, nothing extra-special. It's the font itself that matters, and the browser's rendering engine.

    You could try a different font, or you could use browser-specific stylesheets to solve that particular problem.

    P.S. No, the DOMContentLoaded (jQuery ready) event fires after the DOM is loaded, as the name suggests. load may fire afterward, I'm not sure. Best not to rely on it.