1 Reply Latest reply on Dec 5, 2016 10:44 AM by Liz, Typekit Support

    Typekit fonts loading with delay in Chrome

    Claudia Uscategui Level 1

      Hello,

      I have a Wordpress site with very simple layout, only text. I'm using the 2016 theme. I'm using Typekit fonts but there is a delay in downloading the fonts in Chrome. Any ide a why?

        • 1. Re: Typekit fonts loading with delay in Chrome
          Liz, Typekit Support Adobe Employee

          I'm sorry that you ran into trouble with this!  If sounds like you are seeing the "flash of unstyled text", or FOUT, which occurs when the page loads before the fonts from Typekit are available.  The page text is shown with the fallback font until the Typekit fonts are put into place.

           

          This behavior is expected when you load Typekit using the asynchronous option ("async: true" in your embed code). When using asynchronous loading, the fonts are always loaded in the background, which can result in a flicker of fallback fonts whether the Typekit font data is loaded from the server or the browser cache.

           

          Typekit provides font events that you can use to style (or hide) your content to minimize that flash:

          https://helpx.adobe.com/typekit/using/font-events.html

           

          If you would prefer to have the page wait for the fonts from Typekit to be available, you can use the <script> tag to block the page render and prevent any chance of FOUT by setting the option to false, i.e.

           

          <script src="https://use.typekit.net/[kitID].js"></script>

          <script>try{Typekit.load({ async: false });}catch(e){}</script>

           

          If this doesn't solve the problem for you, it would help to be able to take a look at your website.  You can email us at support@typekit.com if you don't want to share the URL on the forum.

           

          Thanks!

          -- liz