Contact Us​​ | Status Blog
Help Center
Main Web Design and Development › Font events

Font events

In order to help you better control how your page is displayed while fonts are loading or inactive, the Typekit embed code provides a set of font events that are triggered as fonts are loaded onto the page. These font events are accessible from both CSS and Javascript.

There are three main font events, each of which has a corresponding class name (in parentheses):

  1. loading (.wf-loading): Web fonts are loading
  2. active (.wf-active): Web fonts are active
  3. inactive (.wf-inactive): Web fonts are inactive

The CSS classes associated with these events are appended to the HTML element during loading. They can be used in your stylesheets to control how the page is styled as fonts load. For example:


.wf-loading {        
  /* styles to use when web fonts are loading */  
}  

.wf-active {        
  /* styles to use when web fonts are active */  
}   

.wf-inactive {        
  /* styles to use when web fonts are inactive */  
}

Common uses of font event classes are to control the flash of unstyled text (FOUT) and to define fallback fonts and styles for browsers that don’t support web fonts or have them turned off. It’s always a good idea to include fallback fonts and styles since some combinations of browser, OS, and user preferences will result in fonts being inactive on your page.

These font events are also available as JavaScript callback hooks via the Typekit.load method. You can pass an object containing callback functions when you call Typekit.load, and these callback functions will be invoked as different font events occur during loading. For example:


<script type="text/javascript" src="http://use.typekit.com/xxxxxxx.js"></script>
<script type="text/javascript">
  try {
    Typekit.load({
      loading: function() {
        // JavaScript to execute when fonts start loading
      },
      active: function() {
        // JavaScript to execute when fonts become active
      },
      inactive: function() {
        // JavaScript to execute when fonts become inactive
      }
    })
  } catch(e) {}
  </script>

These font event JavaScript callbacks are less commonly used than their CSS cousins. When they are used, it’s often to add things like fade-ins when fonts have loaded or to do complex mathematical resizing for presentational layouts based on the dimensions of rendered text.

In addition to these basic font events, more granular font events for individual font variations are also provided. The class names for these events are a combination of font family name, font variation description, and a font event name. So, for example, adding the normal 400 weight of Gesta to a kit would result in font event classes like wf-gesta1gesta2-n4-loading and wf-gesta1gesta2-n4-active. On the JavaScript side, fontloading, fontactive, and fontinactive callbacks are available and can be passed the font family and font description for each individual variation.

These font events are available because Typekit’s standard embed code is based on WebFont Loader, an open-source project produced in collaboration between Typekit and Google. If you want to load fonts from multiple web font providers at once, you can use WebFont Loader’s code directly, instead of the Typekit embed code. More information is available in the WebFont Loader documentation.

Still need help? Email Us.

​​​​
support@typekit.com
http://assets01.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete