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.

Webkit browsers just don't display the text until the font is loaded and it is a much cleaner look.

So, I am wondering if jQuery could help me to know when all data on the page is loaded, including the @font-face file, so that I can then show my text? Is there a jQuery method that tells me when everything is loaded?

Answer 1

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 });