No FOUT Typekit

It's important to load Typekit asynchronously in order to avoid the dreaded Flash of Unstyled Text (FOUT) or worse, Flash of Invisible Text (FOIT).

When using Typekit, avoiding FOIT is rather straight-forward by using their advanced, asynchronous embedding script. Doing so, however, has one major drawback: on every page view you get a short FOUT between the default or fallback font and your Typekit fonts.

Using this package to load your Typekit kits is a turn-key way to avoid this FOUT on subsequent visits. It loads Typekit on first session visit asynchronously, resulting in a FOUT. When Typekit has loaded successfully, it stores the kit ID in session storage. In subsequent visits, it forces Typekit to be loaded synchronously if the kit ID is found in session storage. This should not result in a noticable performance hit because everything will live in your browser cache at that moment.

Usage

import loadTypekit from 'no-fout-typekit';

loadTypekit('yourTypekitID');

Make sure you load the script running no-fout-typekit synchronously or you'll still have a small FOUT.