Typekit Fonts Loading Slowly

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;
	  var config = {
	    kitId: 'zto5tvs', // your typekit ID
	    scriptTimeout: tkTimeout


Leave a Reply

katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.