0

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?

Prembo
  • 2,256
  • 2
  • 30
  • 50
  • After a bit more investigation (thanks to your answer), I was able to track down the problem. I used the equivalent font-face font and it was only marginally better in IE8, (due to difference in font design I imagine). But the real problem was the MS filter used for generating a gradient. I'm using Compass code (generated by http://www.colorzilla.com/gradient-editor/) to create gradient background. The MS filters used for IE6-8 gradients cause the font to appear unclear. When I resort to an image background (sigh...) the font is nice and clear again. – Prembo Jan 23 '12 at 01:55

2 Answers2

4

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.

Ry-
  • 218,210
  • 55
  • 464
  • 476
1

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

Community
  • 1
  • 1
Iain Simpson
  • 8,011
  • 13
  • 47
  • 66