Typekit Font Events

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

  1. Will definitely try this out! Thanks Typekit!

    1. I’m lost. There’s no difference on Firefox. Still a lot of FOUT Am I doing something wrong?

      See my dev site: http://www.azzcatdevelopment.com/Azzcat2010/

      Thanks!

    2. Catherine,

      You need to define the font events in this line:
      try{Typekit.load();}catch(e){}

      See here for syntax:

      Also, consider using the open sourced font events (which I have not tried myself as of yet):

      http://github.com/typekit/webfontloader/blob/master/docs/MODULES.md

    3. Thank Colin,

      I tried all that. Seems no different than if I just put the Typekit code in head as I’ve been doing for months.

      The Google fonts are interesting in theory, but design-wise, not so much yet. Much more pleased w/my Typekit account options.

  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)?

    1. Ryan Carver says:

      Hi Colin – the ‘active’ event should fire in all cases. Can you point me to a sample page? Here or support@typekit.com works.

    2. http://www.dev.colin-sullivan.com/main/

      The typekit code is in interface.js.

      I haven’t even begun testing with IE.

    3. If I put an alert in the active event, it gets called. For some reason the dom manipulation is just not occurring.

    4. Scratch that, I’m not sure why i’m getting such inconsistent results.

    5. All the inconsistencies and problems went away when I started using the general WebFont loader found here:

      http://github.com/typekit/webfontloader/blob/master/docs/MODULES.md

  5. dagomar says:

    “Fout” means wrong in dutch :)

  6. 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

  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 …

    <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

    1. Ryan Carver says:

      Hi Tobias, thanks for the note. We’re tracking that issue on the project page

  8. 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

  9. 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;
    }

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

  11. 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.