Contact Us​​ | Status Blog
Help Center
Main Web Design and Development › Styling fallback fonts using F...

Styling fallback fonts using Font Events

Fonts are loaded as assets into a web page—just like images or video. Depending on the combination of operating system, web browser, installed extensions, user preferences, and connection speed, web fonts may sometimes fail to render. (For example, if a user is using an older browser or has a security setting that prevents referrers from being sent.) While Typekit’s web fonts will render for the majority of users (at least 97% of the web), occasionally the fonts will be unavailable. In these cases, the fallback fonts in the CSS stack will be used instead.

Typekit provides Font Events that give you control over the style of your fallback fonts. For example, you can adjust the size of the fallback fonts when using a condensed web font, so that your layout remains consistent even when the web fonts fail to load. Here’s how:

.headline { 
  /* These fallback styles are used by default */  
  font-family: Arial, sans-serif;  
  font-size: 18px; /* Smaller size for our non-condensed fallback font */

.wf-active .headline { 
  /* These styles are used when Typekit web fonts are active */  
  font-family: "proxima-nova-extra-condensed", 
    Arial, sans-serif;  
  font-size: 24px; /* Larger size for our condensed font */

Still need help? Email Us.

seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found