Typekit Fonts Loading Slowly

December 08, 2014

Embedded fonts that are being loaded from a server / another website, or file, will sometimes load after the main css file, and after the page is loaded, resulting in a weird display. Typekit fonts can be loaded faster using a timeout script.

  (function() {

    var config = {
      kitId: 'abc1def'
    };

    var d = false;
    var tk = document.createElement('script');

    tk.src = '//use.typekit.net/' + config.kitId + '.js';
    tk.type = 'text/javascript';

    tk.async = 'true';

    tk.onload = tk.onreadystatechange = function() {
      var rs = this.readyState;
      if (d || rs && rs != 'complete' && rs != 'loaded') return;
      d = true;
      try { Typekit.load(config); } catch (e) {}
    };

    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(tk, s);

  })();

Sourced here.

Update – June 30, 2017

Here’s an additional function that can be updated with your Typekit code to help your fonts load faster:

<script type="text/javascript">
	(function(d) {
	  var tkTimeout=3000;
	  if(window.sessionStorage){if(sessionStorage.getItem('useTypekit')==='false'){tkTimeout=0;}}
	  var config = {
	    kitId: 'zto5tvs', // your typekit ID
	    scriptTimeout: tkTimeout
	  },
	  h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+"wf-inactive";if(window.sessionStorage){sessionStorage.setItem("useTypekit","false")}},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.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>