UPDATE: Typekit Font Events have been opensourced as WebFont Loader. Typekit's available events will be updated soon with full support for the WebFont Loader API.
Web fonts may be the best thing to happen to web design in years, but that doesn't mean there aren't some tricky issues to overcome. One of the most annoying things is dealing with what's become known as the FOUT or 'Flash of Unstyled Text'. It's what happens in some browsers while waiting for fonts to download.
Typekit is introducing Font Events to put you back in control when using web fonts. It's simple: Typekit will tell you when the fonts have become active. You can do cool things with that information, like
- Control the FOUT
- Normalize font metrics between the fallback font and the web font
- Show a loading message
- Anything!
As well, we tell you when the font won't be downloaded so that you can modify your design to best maintain its intent.
Events are triggered as classes on the html element.
/*
* This class will be applied to the <html> element as soon as fonts have started loading.
*/
.wf-loading {
}
/*
* This class is applied to the <html> element when fonts have loaded and are rendered.
*/
.wf-active {
}
/*
* This class is applied to the <html> element if Typekit does not support the current browser.
*/
.wf-inactive {
}
Events are triggered as callbacks in Typekit.load.
Typekit.load({
/*
* This funtion will be called as soon as fonts have started loading.
*/
loading: function(data) {
// fonts are loading.
},
/*
* This function will be called after the fonts have loaded and rendered.
*/
active: function() {
// fonts have loaded!
},
/*
* This function will be called if Typekit does not support the current browser.
*/
inactive: function() {
// this browser doesn't support fonts
}
});
The simplest thing to do with Font Events is to control the FOUT in FireFox. It's as easy as this.
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://use.typekit.com/YOURKITID.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style type="text/css">
h1 {
visibility: hidden;
}
.wf-active h1 {
visibility: visible;
}
</style>
</head>
<body>
<h1>No more FOUT</h1>
</html>
Font Events are experimental. They might not work in all situations, but the API will not change.
- IE may not behave correctly in quirksmode.
Do you know if it's common for the callbacks not to fire? The classes work fine, but when I try to integrate the callbacks they never seem to fire.