Website Optimisation Tip : Typekit

I recently did an overhaul of the website and one of the issues I was getting from Google Page Insights was that I needed to prioritise visible content.

Which was confusing as I could see a lot of the content (in this case, a blog post). So I set about trying to find out what it was. I made my way through the templates deleting things one by one until I deleted Typekit.

You’ll recognise this

(function(d) {
   var config = {
     kitId: 'xxxxxxx',
     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);

Low and behold, no longer did I need to prioritise visible content. Also, no longer did I have a nice font.

Bugger!

But I wasn’t deterred and it wasn’t long before I had a solution. Turns out, you can use the Google Font loader with Typekit and amazingly, it doesn’t cause the issue I was getting. This is the code

WebFontConfig = {
    typekit: { id: 'xxxxxx' }
};

(function(d) {
    var wf = d.createElement('script'), s = d.scripts[0];
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
    wf.async = true;
    s.parentNode.insertBefore(wf, s);
})(document);

So basically, use the latter bit of code if working with Typekit if you get the prioritise issue.