Smoother webfont loading

Refresh browser to see how the webfonts below are loaded. Best viewed with a fresh cache. Note: effects are more prominent on pages more resource-demanding than this small demo.

Some example text 1 (Fallback displayed)

Some example text 2 (Smooth display)

Notes:

• A class of wf-loading is added to the html element by a small piece of JS
• Styles are attached to this class that set the opacity of example text 2 to '0'
• Example text 1 is left alone
• Meanwhile the Google webfont loader script loads our font via @font-face
• The Google script removes the wf-loading class once fonts have loaded, thus returning the opacity of example text 2 to '1'. CSS transitions are used to fade this opacity change for capable browsers.

More notes:

• Example text 1 is handled by default browser behaviour. At the time of writing (July 2013) in most browsers this behaviour seems to be: show the fallback font, then replace it with the webfont when loaded, i.e. FOUT.
• Example text 2 avoids FOUT by being hidden until the font has loaded thanks to some bespoke JS.
• Why use bespoke JS to assign the wf-loading class when the Google webfont loader does this for us? In some cases I found that this kicked in too late and the fallback font was displayed before the CSS attached to the class could be applied. If this isn't an issue on your build, you can leave the loader to handle it all.
• If JS is not available, the wf-loading class is never applied, the text isn't hidden, and the fallback font is displayed.

www.css-takeaway.com / @iamandyjones

developers.google.com/fonts/docs/webfont_loader