Flicker-free Typekit

Trevor — Fri, 29 Jan 2010 01:26:22 +0000

[Update: On May 14th, 2010, Typekit finally announced an official solution to the “flash of unstyled text” problem. So, the fix below should be considered obsolete.]

I’m a fan of Typekit. Being able to go beyond the old Arial-Verdana-Times-Georgia paradigm, on any modern browser, without Flash (unlike sIFR), and with selectable text (unlike Cufón), is a dream come true.

One problem, though: It takes a few milliseconds to load up and render those fonts. That’s not so bad in itself; what’s bad is that the browser renders everything in non-Typekit fonts first, creating an annoying flicker every time the page loads as the text gets replaced by fancier fonts.

Fortunately, there’s a fairly easy solution (though not an officially supported one—see below). Just add this to your site body:


  
  <script type="text/javascript">
    document.getElementById('domain-com').style.opacity = 0;
    setTimeout("document.getElementById('domain-com').style.opacity = 1", 1000);
    Typekit.load('KIT_ID', {
      afterLoad: function(data) {
      	setTimeout("document.getElementById('domain-com').style.opacity = 1", 1);
      }
    });
  script>

Then substitute your actual domain for domain-com, and (important!) your site’s unique Typekit ID for KIT_ID. You can get this ID by logging in to Typekit, launching the Kit Editor, and clicking the “Embed Code” link; it’s an 8-letter alphanumeric combination.

Here’s a breakdown:

The ID on line 1 isn’t just a good selector; it’s good form. The most common convention is to use your domain (with a dash instead of a dot), which makes things easier for the Greasemonkey types.
The script include on line 2 brings in the Typekit description of your site’s kit. You can move this line up to your section if you want.
Line 4 makes your entire site disappear. Because this is at the top of your body, nothing is going to get rendered. It’s important that this line be here, rather than in another file or even at the foot of your body.
The call to Typekit.load does the actual loading of the fonts, and the afterLoad callback will be executed right after that happens. That’s when we want to make the body opaque again, right? Well, not quite. It seems that there’s a small delay between the callback and text refresh. Fortunately, using setTimeout to add a tiny delay (1ms) seems to eliminate this, finally ridding us of the dreaded flicker.

Caveat: The afterLoad event is currently considered experimental. An official solution for avoiding flicker is likely to be added in the future.

Trevor Burnham » Typekit

Flicker-free Typekit