I’ve been using @font-face more and more over the past couple of months as a way to use custom fonts on websites I manage, but the issue I keep running into is that the contents of the page (including background sprites) will flicker a second after the content has loaded. It’s really ugly.
The best solution that I have found for solving this issue is one published by Paul Irish (in Fighting the @font-face FOUT).
Drop this snippet of javascript in your JS. It targets FireFox 3.5+ and takes care of automatically hiding all page contents until the fonts are loaded and ready to be rendered.
Instead of a flicker, the user will just see a blank page for that half second and then a fully rendered page with all custom fonts embedded. I’ve not tried Google’s Web Font API or Directory, but their homepage (which is supposedly using the web font api) flickers in Firefox – so I’m not sure it works all that well.
Here’s the javascript I use to solve the flicker issue:
// if firefox 3.5+, hide content till load (or 3 seconds) to prevent FOUT
var d = document, e = d.documentElement, s = d.createElement('style');
if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
s.textContent = 'body{visibility:hidden}';
e.firstChild.appendChild(s);
function f(){ s.parentNode && s.parentNode.removeChild(s); }
addEventListener('load',f,false);
setTimeout(f,3000);
}
})();
Andrew
September 28, 2010 at 1:03 amthumbs up – thanks for sharing
David
October 10, 2010 at 9:32 amCheers, worked perfectly. Thank you!
W3Engineers
February 17, 2011 at 8:00 pmWorks great… 🙂
Trevor
March 9, 2011 at 6:13 amGreat script – worked perfectly
Mark Skowron
March 18, 2011 at 12:51 amYou’re a life-saver! I’ve been dealing with this problem for a while and now my sites work perfectly. Thanks.
Alex / agimedia.de
March 23, 2011 at 9:29 pmThank you so much for this little code snippet. Works like a charm and everything is now smooth in ff 3.5. Keep up the good work and thanks again, Alex
Rizki
June 14, 2011 at 12:27 pmI use webfont loader by google (http://code.google.com/apis/webfonts/docs/webfont_loader.html), it’s work perfect also and more simple in my opinion
Ladereihenfolge von Webfonts - XHTMLforum
February 25, 2012 at 7:54 pm[…] falls es noch jemand interessiert, im Firefox hilft dieses Script ganz gut: How to fix the @font-face flicker issue in FireFox | Joshua McGinnis Zumindest sehe ich das Flackern nicht mehr, sondern die Schrift wird erst gezeigt wenn die Seite […]