We take a little break from working on search to solve a little niggling issue.

"FOUT" being "Flash of Unstyled Text". This is phenomenon where @font-face fonts take a little bit to load and thus you see the fallback font before the custom font. This is normally not a problem in Typekit. Nor is it really a problem in modern browsers these days (except IE 9). However, it is a problem for us because we've specifically chosen to load the Typekit JavaScript asynchronously.

Hope is not lost though, Typekit has this problem covered, we just need to do a smidge of work on our site. We put a new class name on the <html> element called "wf-loading" (web font loading). Then in our CSS, we declare that any selector that uses a custom font is visibly hidden until that class name goes away. A little risky you might think, but if the font fails to load there is a timeout that removes the class anyway. This is just for fighting FOUT remember, just a little visual nicety.

We do all this by making a little Sass @mixin called "preventFOUT" and @include-ing it in our custom font stacks, which are also @mixins.

This works well for us now. Ultimately in this design we move over to HF&J fonts in which load directly via @font-face so we basically stop worrying about this.

Comments

  1. alex_p
    Permalink to comment#

    hi chris! the link to paulirish.com doesn’t work because there’s a single quote at the end of it.

  2. CWSpear
    Permalink to comment#

    I totally thought you were going to add wf-loading & { visibility: hidden; } to all your font-family mixins that have a web font. That way, anywhere you used a webfont, it automatically did the fight-the-FOUT stuff.

  3. Akos
    Permalink to comment#

    On Typekit blog, it is also recommended to use .wf-inactive class as well to set up a fallback font-family stack if Typekit fails to load.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.