From the course: Responsive Typography Techniques

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Managing flashes of unstyled text (FOUT) using web font events

Managing flashes of unstyled text (FOUT) using web font events - CSS Tutorial

From the course: Responsive Typography Techniques

Start my 1-month free trial

Managing flashes of unstyled text (FOUT) using web font events

“

Like many designers, I absolutely love web fonts. But there's one thing about web fonts that remains just a bit ugly. And that is the flash of unstyled text, or fout, that we often see before our web fonts have completely loaded. In this tutorial, we'll look at what we can do to get around the fout, and have a say on what is shown, and when, with web font events. All browsers handle the display and loading of web fonts just a little bit differently. Add to that the fact that there are so many different devices, and ranges of connection speed, it becomes really tough to ignore the realities of web font loading. Our web fonts can't be used until they load, and we can't be certain how long that will take. So that's where Web Font Loader comes in. Web Font Loader is an open-source effort put together between Google and Typekit, and it's a script that gives us some events that we can use to specify what should happen during the various stages of web font loading. Web Font Loader will…

Contents