Smoother Loading Typekit Fonts: A nice approach by Joni Korpi

Korpi CSS Snippet Screenshot

For lovers of Typekit webfonts: If you want to guarantee that your pages load for all users without glitches, you’ll want to use Typekit’s asynchronous loading script. Advantage: pages will load fine for all users even in the event of a font network outage. Disadvantage: you’ll notice a flash of unstyled text (FOUT).

Joni Korpi, designer of the Golden Grid System and the Frameless grid system, has proposed a nice solution, which involves creative use of:

  • loading classes provided by Typekit
  • CSS3 transitions for fade-in
  • a base64 animated image to indicate that fonts are loading

As you’ll notice while perusing his blog, it provides a nice effect. I’m contemplating this method.

Read Joni’s post about this method

How does it strike you?

Related Links

Leave a Reply