How to fix the @font-face flicker issue in FireFox

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 ( === ''){ // gecko 1.9.1 inference
s.textContent = 'body{visibility:hidden}';
function f(){ s.parentNode && s.parentNode.removeChild(s); }

Published byJosh McGinnis

Josh is a software engineer, leader, startup advisor for the LA Chamber of Commerce and consultant residing in the Los Angeles area. Josh is passionate about helping entrepreneurs and businesses reach their maximum potential.


  • Andrew

    September 28, 2010 at 1:03 am Reply

    thumbs up – thanks for sharing

  • David

    October 10, 2010 at 9:32 am Reply

    Cheers, worked perfectly. Thank you!

  • W3Engineers

    February 17, 2011 at 8:00 pm Reply

    Works great… 🙂

  • Trevor

    March 9, 2011 at 6:13 am Reply

    Great script – worked perfectly

  • Mark Skowron

    March 18, 2011 at 12:51 am Reply

    You’re a life-saver! I’ve been dealing with this problem for a while and now my sites work perfectly. Thanks.

  • Alex /

    March 23, 2011 at 9:29 pm Reply

    Thank 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 pm Reply

    I use webfont loader by google (, it’s work perfect also and more simple in my opinion

  • Ladereihenfolge von Webfonts - XHTMLforum

    February 25, 2012 at 7:54 pm Reply

    […] 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 […]

Post a Comment