1 Reply Latest reply on Sep 7, 2016 9:40 AM by Liz, Typekit Support

    Typekit Async loading shows FOUT on subsequent loads even after fonts are cached

    marleneb83641608

      I've had my typekit delivery set to async and see FOUT even after the fonts are cached in browser on subsequent page visits. I expect this behavior  on the first page visit before the font has been cached but do not expect it after its been cached. I have font event styling to handle inactive and loading states of the fonts but want to prevent the FOUT happening on pages when the browser already has the js and fonts cached.

        • 1. Re: Typekit Async loading shows FOUT on subsequent loads even after fonts are cached
          Liz, Typekit Support Adobe Employee

          Hi marleneb,

           

          The behavior you are seeing 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. This can result in a flicker of fallback fonts, as you saw, until the Typekit font data is loaded from the server or browser cache.

           

          If you'd like to share your website URL, we can take a look and see if there are any other font event recommendations we can make to help minimize that FOUT.  (Feel free to email support@typekit.com if you don't want to share the site on the forum.)

           

          Or 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; remove the {async: true} option or set it to false.

           

          I hope that this helps; let me know if you have any other questions.

          -- liz