November 11, 2010
This is our fourth and final post in an ongoing series about using font events for better control over how web fonts load. Read the first post for an overview of font events, the second post for information on controlling the FOUT, and the third post for information on fallback fonts and styles.
Typekit.load. Here’s the generic example of setting up callback functions for each of these three font events:
- As soon as the DOM is ready, hide the web fonts by applying
- Once the fonts have finished loading, remove
visibility: hiddenand fade in the text (using jQuery’s
- If the fonts don’t load successfully, remove
visibility: hidden. We can also apply fallback styles in CSS using the
wf-inactiveclass (as we discussed in our previous post on fallback styles).
Time-lapse capture of the example page fade: Mac Firefox above, Windows IE8 below
Unfortunately, when you look at this example in Internet Explorer, you’ll notice that there are some jagged black outlines around the edges of the characters as they fade in. This is because IE8 and below don’t support CSS
opacity, but instead use a proprietary filter. The upcoming release of IE9 will reportedly support CSS
opacity and should address this issue. However, if we want to avoid these jagged outlines now, we need to make sure that browsers that don’t support CSS
opacity use an alternate effect, such as showing the text immediately. jQuery provides a handy
jQuery.support.opacity property that we can use to test if a given browser supports CSS
Now we’ve progressively enhanced our page for browsers that support CSS
This is the last post in our series on font events. If we missed covering an application of font events that you’re interested in, let us know in the comments. And as always, you can email Typekit support with any questions. Thanks for tuning in!