Typekit FOUT Fix

typekit-cloudflare-fout-fix.html

<!-- We have to tell Cloudflare to ignore Typekit scripts to stop the flash of text on load (FOUT). We apply that to our scripts, but you can find out more about the data attribute here: https://support.cloudflare.com/hc/en-us/articles/200169436-How-can-I-have-Rocket-Loader-ignore-my-script-s-in-Automatic-Mode- -->
<!-- Also read http://anythinggraphic.net/fix-for-fout-while-using-typekit-and-cloudflare -->

<script data-cfasync="false" type="text/javascript" src="http://use.typekit.com/xxxxxxx.js"></script>
<script data-cfasync="false" type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style type="text/css">
  .wf-loading {
    /* Hide the blog title and post titles while web fonts are loading */
    visibility: hidden;
  }
</style>

typekit-fout-fix.html

<!-- TypeKit Blog Post about FOUT: http://blog.typekit.com/2010/10/29/font-events-controlling-the-fout/ -->
<!-- Also read http://anythinggraphic.net/fix-for-fout-while-using-typekit-and-cloudflare -->

<script type="text/javascript" src="http://use.typekit.com/xxxxxxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style type="text/css">
  .wf-loading {
    /* Hide the blog title and post titles while web fonts are loading */
    visibility: hidden;
  }
</style>