If you’ve ever used Typekit to serve webfonts, you’re definitely familiar with the Flash Of Invisible/Unstyled Text problem.

While googling “why doesn’t typekit cache,” I discovered Typekit Cache, a script that stores your Typekit webfonts in localStorage to eliminate the Flash Of Invisible/Unstyled Text.

It’s easy to use, simply copy the contents of typekit-cache.min.js before your Typekit (advanced) embed code.

<script> ! function ( e , t , n , a , c , l , m , o , d , f , h , i ){ c [ l ] && ( d = e . createElement ( t ), d [ n ] = c [ l ], e [ a ]( " head " )[ 0 ]. appendChild ( d ), e . documentElement . className += " wf-cached " ), function s (){ for ( d = e [ a ]( t ), f = "" , h = 0 ; h < d . length ; h ++ ) i = d [ h ][ n ], i . match ( m ) && ( f += i ); f && ( c [ l ] = " /**/ " + f ), setTimeout ( s , o += o )}()}( document , " style " , " innerHTML " , " getElementsByTagName " , localStorage , " tk " , /^@font|^ \. tk-/ , 100 ); </script> <script> ( function ( d ) { var config = { kitId : ' apz3vzb ' , scriptTimeout : 3000 , async : true }, h = d . documentElement , t = setTimeout ( function (){ h . className = h . className . replace ( / \b wf-loading \b /g , "" ) + " wf-inactive " ;}, config . scriptTimeout ), tk = d . createElement ( " script " ), f = false , s = d . getElementsByTagName ( " script " )[ 0 ], a ; h . className += " wf-loading " ; tk . src = ' https://use.typekit.net/ ' + config . kitId + ' .js ' ; tk . async = true ; tk . onload = tk . onreadystatechange = function (){ a = this . readyState ; if ( f || a && a != " complete " && a != " loaded " ) return ; f = true ; clearTimeout ( t ); try { Typekit . load ( config )} catch ( e ){}}; s . parentNode . insertBefore ( tk , s ) })( document ); </script>

If you use this approach, be sure to star Typekit Cache on GitHub!