Using jQuery to know when @font-face fonts are loaded?
I use this function - tested in Safari, Chrome, Firefox, Opera, IE7, IE8, IE9:
function waitForWebfonts(fonts, callback) {
var loadedFonts = 0;
for(var i = 0, l = fonts.length; i < l; ++i) {
(function(font) {
var node = document.createElement('span');
// Characters that vary significantly among different fonts
node.innerHTML = 'giItT1WQy@!-/#';
// Visible - so we can measure it - but not on the screen
node.style.position = 'absolute';
node.style.left = '-10000px';
node.style.top = '-10000px';
// Large font size makes even subtle changes obvious
node.style.fontSize = '300px';
// Reset any font properties
node.style.fontFamily = 'sans-serif';
node.style.fontVariant = 'normal';
node.style.fontStyle = 'normal';
node.style.fontWeight = 'normal';
node.style.letterSpacing = '0';
document.body.appendChild(node);
// Remember width with no applied web font
var width = node.offsetWidth;
node.style.fontFamily = font + ', sans-serif';
var interval;
function checkFont() {
// Compare current width with original width
if(node && node.offsetWidth != width) {
++loadedFonts;
node.parentNode.removeChild(node);
node = null;
}
// If all fonts have been loaded
if(loadedFonts >= fonts.length) {
if(interval) {
clearInterval(interval);
}
if(loadedFonts == fonts.length) {
callback();
return true;
}
}
};
if(!checkFont()) {
interval = setInterval(checkFont, 50);
}
})(fonts[i]);
}
};
Use it like:
waitForWebfonts(['MyFont1', 'MyFont2'], function() {
// Will be called as soon as ALL specified fonts are available
});
Ok, it was pretty easy. Basically I just set my text to:
a.main {visibility: hidden;}
and then add:
$(window).bind("load", function() {
$('#nav a.main').addClass('shown');
});
Then make sure that the following is also in my css file:
a.main.shown {visibility: visible;}
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/