Typekit is awesome there’s no denying it.

Imagine hundreds of fonts available in one library that can be featured on your website. Imagine a simple and clean interface that an infant could understand. Imagine it being standards compliant, accessible and most importantly completely legal.

You’ve just imagined Typekit.

Despite it’s brilliance it does have one fault. It’s called FOUT.

FOUT stands for flash of unstyled text. Basically what happens is the web fonts sometimes take a while to load so they aren’t initially shown.

The browser will either show a font from the font-stack or a default font if that isn’t specified. I think I also need to mention that this only applied to Firefox(My favorite browser). Here is a breakdown of how each browser functions:-

 IE – Nothing will be rendered until the web fonts have finished loading. No FOUT

Webkit – Text set in a web font isn’t rendered until that web font has finished loading. No FOUT.

FF – Text set in a web font is rendered using the fallback/default font untilt he web font has loaded. FOUT will be present depending on internet speed.

This is a little bit annoying but typekit offer a simple solution that can help make FF act exactly the same as its relatives.

Whilst typekit is loading it adds the class wf-loading to the html tag. If you are a web type you can probably guess what I am going to propose next.

.wf-loading p,
.wf-loading h1 {
    display:none;
}

Pretty self-explanatory. Whilst the wf-loading class is on the body it won’t show the p and h1. When the webfonts are loaded typekit removes this class and your text will magically appear again. Obviously the CSS can be modified and target whatever you like.

Pretty simple but very effective.

• Article
• Learning
• Web Design