22

FOUT (Flash of Unstyled Text) solution for Typekit and Chrome 50

By Anant Garg  /  Javascript, Web Development  /  6 Responses

The Problem

If you are using Typekit to power fonts on your website, then you would have noticed the flash of unstyled text problem (or FOUT) in Chrome 50. The folks at Typekit have written a fairly long post about it; TL;DR- it’s not really considered a bug so the problem is here to stay.

There are a couple of fixes available for this problem but most posts are over a year old.

The Solution

I’ve modified some existing code by Sebastian Kippe (read his blog post) and added a fix so that for a given session, if the browser is unable to load the fonts, then it will not try again till end of session. And if it is able to load the fonts, then the text will be invisible until the font is loaded.

Add the following just before the closing </HEAD> tag of your site template-

<script>
		(function(d) {
			loadFonts = 1;
			if(window.sessionStorage){
				if(sessionStorage.getItem('useTypekit')==='false'){
					loadFonts = 0;
				}
			}

			if (loadFonts == 1) {
					var config = {
						kitId: 'XXXXXXXX',
						scriptTimeout: 3000,
						async: true
					},
					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='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>


<style>
		.wf-loading	p, .wf-loading h1, .wf-loading h2, .wf-loading h3, .wf-loading h4 {
			visibility: hidden;
		}
		.wf-active	p, .wf-active h1, .wf-active h2, .wf-active h3, .wf-active h4 {
			visibility: visible;
		}
		.wf-inactive	p, .wf-inactive h1, .wf-inactive h2, .wf-inactive h3, .wf-inactive h4 {
			visibility: visible;
		}
</style>

You will only need to replace ‘XXXXXXXX’ in the above with your actual Typekit Kit ID. You can add more styles if need be.

Flow chart

1. The CSS styles hide all visible text (modify to add more styles if required)
2. The script tries to load the Typekit Javascript file
3. If the script is unable to do so within 3 seconds, it loads the standard fonts and sets a local storage variable to avoid trying to load the fonts again for the current session
4. All future calls for the same session show the standard fonts

How to test if font’s don’t load?

To check how your site will render if the Typekit fonts don’t load, simply replace “use.typekit.net” with “donotuse.typekit.net” (or anything else) in the above code. Don’t forget to replace it back once you’re done testing!

That’s all folks!

Discuss, Share & Subscribe

Do let me know your suggestions on how I can improve this code. If you like what you are reading, then please help spread the word by re-tweeting, blogging and sharing this. Thank you.


402 Words
16351 Views