Stop the Flicker Flash and Load Adobe Typekit Font Faster on WordPress

If you have an Adobe TypeKit font loaded on a WordPress site you may notice the fonts flicker just before the Typekit font is fully loaded on the page – whilst it transitions from the default font to the Typekit one – this is also known as a phenomenon called FOUC, an acronym for ‘flash of unstyled content’ or FOUT for ‘flash of unstyled text’.

You can get around this by changing a value in your Typekit settings…

typekit-wordpress

 

By default the kit settings are async: true – change it to async: false

This will stop the fonts rendering until they are downloaded and ready for use.

Add in Adobe Typekit to WordPress Head

To add in the Adobe Typekit Javascript code to the WordPress head section, add it in to your themes functions.php file using wp_head with an echo like so…

 add_action('wp_head', 'youttheme_font_typekit');
//Add TypeKit Font Set
 function youttheme_font_typekit() {
 echo '<script src="https://use.typekit.net/izu7vjs.js"></script>
<script>try{Typekit.load({ async: false });}catch(e){}</script>';
 }

That should stop the flash FOUT!

ref

2 Comments

  1. Kevin on April 9, 2017 at 12:31 am

    What happens if typekit servers have an issue? Won’t this cause your whole site to not load?

    • Neil Gowran on April 15, 2017 at 7:04 am

      No, the site will load, declared fonts will be the fallback and if there are no declared fonts then the browser defaults will be used.

Leave a Comment





%d bloggers like this: