September 08, 2017

Typekit Cache

Photo by Lauren Manning / CC BY 2.0

If you’ve ever used Typekit to serve webfonts, I’m sure you’re familiar with the Flash Of Invisible/Unstyled Text problem.

While rage googling “why doesn’t typekit cache,” I discovered Typekit Cache, a script that stores your Typekit webfonts in localStorage to eliminate the Flash Of Invisible/Unstyled Text.

It’s easy to use, simply copy the contents of typekit-cache.min.js before your Typekit (advanced) embed code.

<script>
  !function(e,t,n,a,c,l,m,o,d,f,h,i){c[l]&&(d=e.createElement(t),d[n]=c[l],e[a]("head")[0].appendChild(d),e.documentElement.className+=" wf-cached"),function s(){for(d=e[a](t),f="",h=0;h<d.length;h++)i=d[h][n],i.match(m)&&(f+=i);f&&(c[l]="/**/"+f),setTimeout(s,o+=o)}()}(document,"style","innerHTML","getElementsByTagName",localStorage,"tk",/^@font|^\.tk-/,100);
</script>
<script>
  (function(d) {
    var config = {
      kitId: 'apz3vzb',
      scriptTimeout: 3000,
      async: true
    },
    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='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=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>

If you use this approach, be sure to star Typekit Cache on GitHub!

If you enjoyed this post, follow @jfornear on Twitter.