Google

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

Added by on August 17th, 2010, filed under Google, Javascript, Web Development

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:

1
2
3
4
5
6
7
8
9
10
11
(function(){
  // 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);
  }
})();

About the Author: Joshua McGinnis

Joshua is a web designer and developer for Intuit, Inc. His other interests include guitar, photography, mycology, amateur chemistry, WWII movies and his beautiful wife Catherine.

Enjoy this Post?

Spread the word by promoting this post on FaceBook and Twitter.

Most Commented Posts

Reader Comments (7)

  1. Andrew September 28, 2010 at 1:03 am

    thumbs up – thanks for sharing

    Reply
  2. David October 10, 2010 at 9:32 am

    Cheers, worked perfectly. Thank you!

    Reply
  3. W3Engineers February 17, 2011 at 8:00 pm

    Works great… :)

    Reply
  4. Trevor March 9, 2011 at 6:13 am

    Great script – worked perfectly

    Reply
  5. Mark Skowron March 18, 2011 at 12:51 am

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

    Reply
  6. Alex / agimedia.de March 23, 2011 at 9:29 pm

    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

    Reply
  7. Rizki June 14, 2011 at 12:27 pm

    I 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

    Reply

What do you think?