Learn Graceful Handling of the Unstyled Text Flash in Adobe Typekit

with metasyncro

Zot6iovyr462ops1ju1g?cache=true

The Problem: The Flash of Unstyled Text (FOUT)

Adobe Typekit provides an awesome library of fonts, but they need to be loaded via JavaScript. This causes a problem that is is known as the Flash of Unstyled Text, or FOUT. This occurs when your text is styled in Times New Roman for a split second on the initial page load. It's a minor problem, but fixing it is super easy and it can add a subtle elegance to your website. 

The Solution: A CSS Transition Animation when TypeKit Loads

When TypeKit is loaded, it appends a collection of CSS classes to the main <html> tag in page. These classes allow us to provide conditional styling based on the current state of Typeset. What we are going to do is set the opacity of the page to 0.0 when TypeKit is in the loading phase, then use a CSS transition animation when the TypeKit fonts become active.

.wf-loading {
  opacity: 0.0;
}

.wf-active {
  -webkit-transition:  opacity 0.25s ease-in;
  transition:          opacity 0.25s ease-in;
                       opacity: 1;
}

.wf-inactive {
  opacity: 1;
}

The result is a elegant Fade In style animation that prevents butt ugly unstyled text from being shown to your visitors. This will give your site a feel that is similar to Medium.com, which has graceful fading animations between page navigations.

You can also apply this technique to specific elements if you don’t want the entire page.

If you really want to get crazy, you can add more complex animations using the CSS transform property to alter the size, position, rotation, and skew of any given element.

Signup and Unlock for free

Grades

Nobody has graded this lesson yet.

n 0.0%
Technology Code

  • 1 Unlocks
  • 169 Total Reads
  • 8 minutes Est. Learning Time