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.
There are three main font events, each of which has a corresponding class name (in parentheses):
- loading (.wf-loading): Web fonts are loading
- active (.wf-active): Web fonts are active
- 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: