Web Fonts and FOUT Control


Domenic Barbuzzi in Archive on October 19, 2012

A Brief History

With the start of the Web Fonts service, the FOUT (flash of unstyled text) phenomenon was a wide-spread problem. To remedy this issue we added code to our JavaScript implementation.

Our first method included hiding the visibility of elements on pages that used Web fonts. We then crafted a more efficient and cleaner method of preventing FOUT – we use a single class to hide only the text for elements using Web fonts. We then strip that class’s properties when the Web fonts are ready to display. One thing to note is that the class is left on these elements in the DOM; however, without properties, the class has no meaning and is invisible to visitors, save for those using some manner of developer tools.

Back to the Present

Since the introduction of Web fonts, broadband connections have grown more common, and browsers have matured in handling embedded fonts. So has the Web Fonts service. We have adjusted our JavaScript in two key ways:

  1. FOUT-prevention is disabled by default
  2. Now there are configuration options that can be set before loading our JavaScript in order to turn FOUT-prevention back on and traverse through the DOM to remove the mti_font_element class

The goodies

Below is a sample usage of the FOUT configuration options. To utilize them, simply define the options before including the SCRIPT tag for your Web fonts project. If any of the options are omitted, their default values will be used instead.

<script type="text/javascript">

// create the configuration object
var MTIConfig = {};

// assign the variable to enable FOUT prevention
// default value -> false (prevention disabled)
// true -> enable FOUT prevention
MTIConfig.EnableCustomFOUTHandler = true;

// assign the variable to remove `mti_font_element`
// this is only valid if FOUT prevention is enabled
// default value -> false (class is left on elements)
// true -> remove class when FOUT prevention finishes
MTIConfig.RemoveMTIClass = true;



Great Type Makes Sites Stand Out

Start your free web fonts subscription today

Start Subscription