Typekit Font Events

May 14, 2010

Web fonts may be the best thing to happen to web design in years, but that doesn’t mean there aren’t some tricky issues to overcome. One of the most annoying things is dealing with what’s become known as the FOUT or ‘Flash of Unstyled Text’. It’s what happens in some browsers while waiting for fonts to download.

Typekit is introducing Font Events to put you back in control when using web fonts. It’s simple: Typekit will tell you when the fonts have become active. You can do cool things with that information, like

  • Control the FOUT
  • Normalize font metrics between the fallback font and the web font
  • Show a loading message
  • Anything!

To get started, check out the documentation, then republish your kit. Have fun, and let us know what you think!

21 Responses to “Typekit Font Events”


  1. Will definitely try this out! Thanks Typekit!

  2. Erwin Heiser Says:

    Sweet! Very useful addition this.


  3. Agrees—this is a big deal and I’m real excited to see all these new additions and improvements. Cant wait to try it


  4. Under WebKit on OS X (Safari or Chrome), code in the “active” section is never executed. Does this have something to do with the fact that WebKit by default doesn’t display the fonts until they have loaded (and thus doesn’t suffer from the FOUT problem)?

  5. dagomar Says:

    “Fout” means wrong in dutch :)

  6. Krystyn Says:

    dagomar +10


  7. I just tried to use this in a local file. file:// this does not work, as the webfont loader writes a css file without protocol into the header …

    instead of

    cheers
    tobi


  8. I just tried to use this in a local file. file:// this does not work, as the webfont loader writes a css file without protocol into the header …

    <link rel=”stylesheet” href=”//fonts.googleapis.com/css?family=Droid+Sans%7CDroid+Sans:bold%7CDroid+Sans+Mono”>

    instead of

    <link rel=”stylesheet” href=”http://fonts.googleapis.com/css?family=Droid+Sans%7CDroid+Sans:bold%7CDroid+Sans+Mono”></link>

    cheers
    tobi

  9. Henric Says:

    Hi!
    Loving Typekit so far, just can’t seem to get around this problem.
    Would really appreciate it if you could write a step-by-step tutorial on how to get rid of the FOUT. I tried the CSS stuff but it just aint workin =/

    Thanks!
    /Not a hard core programmer


  10. If you’re having trouble with FOUT, and you’re adding the fonts in your own CSS you probably aren’t setting up the rules yet. This is a lazy way, but it hides your whole page until the fonts are ready:

    .wf-loading {
    visibility: hidden;
    }

    The better way is to add visibility: hidden; only to the selectors that use downloaded fonts:

    h1 {
    font-family: hooligan-1;
    visibility: hidden;
    }

    .wf-active, .wf-inactive {
    visibility: visible;
    }

    OR, best, have a fallback in case the fonts never load:

    .wf-active h1 {
    font-family: hooligan-1;
    }

    .wf-inactive h1 {
    text-indent: -10000px;
    background: url(my-fallback-image.jpg) no-repeat;
    }

    .wf-loading h1 {
    visibility: hidden;
    }


  11. Sorry, should be .wf-active h1, .wf-inactive h1 {
    visibility: visible;
    }

  12. David Cole Says:

    Just a quick note about the documentation, in the example it reads:

    h1 {
    visiblity: hidden;
    }
    .wf-active h1 {
    visiblity: visible;
    }

    The word “visibility” is spelled incorrectly, it’s missing the third letter “i”.


Comments are closed.

%d bloggers like this: