More control with Typekit’s font events
We’ve noticed that the people who use Typekit really pay attention to the details: which web fonts go well together, how they render on different platforms, and how they affect the way their site loads. We love this passionate attention to detail, and we’re happy to provide tools that give our users more of the control they crave. One tool we provide is our Typekit font events, which come baked into every kit we serve.
Font event class names—seen with Firebug—on the site for Jax Vineyards.
We deliver fonts as quickly as we can to as many platforms as possible, but there may occasionally be users for whom fonts load slowly or not at all. The reasons for this can be outside of our control — like a slow connection, an old browser or operating system, or a user preference that disables web fonts. In these cases, you want your page to degrade gracefully, ensuring that the content is still accessible and minimizing distracting changes to your layout. Font events provide the additional control that makes this graceful degradation possible. They let you change the style or behavior of your site in response to slow loading or inactive web fonts.
There are three main font events that are available with Typekit’s standard embed code:
- Loading: the fonts in your kit are in the process of loading
- Active: the fonts in your kit are loaded and we’ve verified that they’re rendering on the page
- Inactive: the fonts in your kit aren’t rendering, either because this platform doesn’t support web fonts or they couldn’t be loaded
In CSS, font events are made available via special class names that are appended to the HTML tag. You can write CSS that is applied to your page during each of these phases:
These font event class names can be used to control how your page looks before the fonts are loaded (avoiding a problem known as FOUT, or the flash of unstyled text). They can also be used to include fallback styles if web fonts should fail to load for any reason.
In the coming weeks, I’ll write more about some common ways that you can use Typekit’s font events, such as controlling the FOUT (flash of unstyled text), providing fallback fonts and styles that keep your layouts from breaking, and fading in a piece of text once fonts have loaded. With a little extra attention to detail, Typekit can help you give every visitor to your site a more beautiful experience.