Using jQuery to know when @font-face fonts are loaded?

Question

I am using @font-face and I hate that Firefox shows the default font, waits to load the @font-face font, then replaces it. So the whole page flashes with the new font.

Answer 1

You should't use $(window).bind('load') - that will wait for the whole page to load (which maybe is what you want), and not just the font. If you want to control the loading process of @font-faces use WebFont Loader, developed by Google and Typekit.

You can use it with Google Font API, typekit and your own webfont provider - you (although I never tried it myself as I'm a Typekit User.

Read about it here: http://code.google.com/apis/webfonts/docs/webfont_loader.html and here: http://blog.typekit.com/2010/05/19/typekit-and-google/