@font-face vs Google Web Fonts

Question

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)

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?

Answer 1

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.

Answer 2

If you want it to be exactly the same on all browsers use something like Cufon.

http://cufon.shoqolate.com/generate/

https://github.com/sorccu/cufon/wiki/Demos

There is a comparison of them all in this article

http://www.nineteenfortyone.com/2010/06/cufon-vs-css3-vs-google-font-api/

Someone asking a similar question here >>

@font-face vs Google Fonts vs Cufon