Advanced vs default

There are two ways of embedding Typekit fonts on your website. Either using their default (blocking) embed code or their advanced (asynchronous) embed code. Both methods have pros and cons.

Default embed code

The default code consists of two <script> tags, placed inside your <head> tag.

<script src="//use.typekit.net/xxxxxx.js"></script>
<script>try{Typekit.load();}catch(e){}</script>

It’s short and simple, but since the scripts are not loaded asynchronously it blocks further rendering of the page. If the request is slow for some reason this can leave you with a blank page until the font kit is loaded.

Advanced embed code

The advanced embed code, loads the fonts asynchronously, meaning it won’t block the page from rendering.

<script>
  (function(d) {
    var config = {      kitId: 'xxxxxxx',
      scriptTimeout: 3000
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(
    /\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement(
    "script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";
    tk.src='//use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadyst
    atechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;
    f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);
</script>

The drawback of this method is that since the page continues to render, a FOUC likely will occur as the text gets rendered before the fonts are loaded. But there are ways to fix this.

Typekit font events

In order to help you better control how your page is displayed while fonts are loading or inactive, the Typekit embed code provides a set of font events that are triggered as fonts are loaded onto the page. help.typekit.com

Typekit provides three font events, but we will only focus on .wf-loading for now. When fonts are loading, the class .wf-loading will be appended to the <html> element. This allows us to control how the page looks like before the fonts are loaded.

Let’s animate!

I’ve chosen to animate blocks of text, and not every <h1>, <p> etc. individually. These are the transitions I use:

.article {
  opacity: 1;
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.wf-loading .article {
  opacity: 0;
  -webkit-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  transform: translateY(-20px);
}

This will make the article fade in and at the same time move it down 20px. See the effect on JSFiddle.