If you’ve ever used Typekit to serve webfonts, you’re definitely familiar with the Flash Of Invisible/Unstyled Text problem.
While 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!
Read Next