Font events: Controlling the flash of unstyled text
An example of FOUT—before and after fonts have loaded—on the blog A Working Library.
We’ve designed Typekit to deliver fonts to web pages as quickly and efficiently as possible. We strive to minimize download size, use as few requests as possible, and distribute fonts around the globe using a CDN so there’s always a server nearby. We also cache fonts so that subsequent page loads have web fonts available immediately. However, despite our best efforts, there may occasionally be users for whom fonts load more slowly.
In these cases, Typekit users are most often concerned about their visitors seeing an effect commonly know as the FOUT, or the flash of unstyled text. You may have noticed the FOUT before: it’s that brief flash of text in a default font before the web fonts have finished loading.
In fact, whether or not you see any FOUT when using web fonts differs based on which browser you’re using. Thanks to research from Steve Souders, Paul Irish, and others, the differences in how browsers load web fonts have been carefully characterized. Here’s what happens when a web page with Typekit loads in each major browser:
- Internet Explorer: Nothing is rendered until the web fonts have finished loading. You shouldn’t see any FOUT.
- Chrome / Safari (WebKit): Text set in a web font isn’t rendered until that web font has finished loading. You shouldn’t see any FOUT.
- Firefox: Text set in a web font is rendered using the fallback font until that web font has finished loading. You may notice FOUT depending on your connection speed.
So when we talk about controlling FOUT, Firefox is the browser that we’re concerned with. Firefox may decide to change in the future to hide text until web fonts have loaded (like WebKit-based browsers). But thanks to Typekit’s font events, we can make Firefox behave just like WebKit browsers today.
Let’s say that I have a blog, and I’m using Typekit fonts for my blog title (which has a class of
blog-title) and post titles (which have a class of
post-title). Using CSS and font events, I want to hide the blog title and post titles in all browsers (including Firefox) until the fonts have finished loading. Assuming that I already created a kit and have assigned web fonts to the
.blog-title selectors, here’s what I would add at the end of my blog’s <head>:
wf-loading class to the
<html> tag. This CSS uses that class to hide the blog and post titles. Once web fonts are detected as active (or inactive), the
wf-loading class is never applied in the first place, so the titles always remain visible.
By taking advantage of font events in our CSS, Firefox will load web fonts just like WebKit-based browsers such as Chrome and Safari, and we ensure that users won’t see an unsightly flash of unstyled content.
In the next installment of our font event series, I’ll talk about how to maintain control over the appearance of your website for users that can’t load web fonts at all. We’ll use CSS and font events to style appropriate fallback fonts so that the page gracefully degrades, maintaining readability, layout, and even consistency in style. See you next time!