Contact Us​​ | Status Blog
Help Center
Main Web Design and Development › Specifying fallback fonts

Specifying fallback fonts

If a user’s browser doesn’t support Typekit or the web fonts cannot load for any reason, the fallback fonts in the CSS stack will be used instead.

In Typekit, you can specify the fallback fonts in one of two ways:

  • By adding the fallback font names to the CSS stack in your kit.
  • By including the fallback font-family names in your own CSS.

Your font stack should contain at least one fallback font that is uniformly available across platforms (like Georgia or Arial), followed by a generic font-family name (like serif or sans-serif). If the browser can’t find the first font, then it will try the second font, and so on.

Adding Fallback Fonts to Your Kit

The fallback font-family names may be added to the “CSS Stack” field in your kit. The generic font-family name serif or sans-serif is included in the kit by default.

CSS Stack field in the Kit Editor

Add any other fallback fonts to the stack as a comma-separated list. The following characters are allowed in the CSS stack field:

a-z A-Z 0-9 - _ , " space

Note that quotation marks must be straight quotes ("), not curly or “smart” quotes (“”). The CSS stack is validated against this list of characters, and the kit will show an error if an invalid character is found.

Error from invalid CSS stack

Using the font-family Names in Your CSS

The fallback font-family names may be added directly to the CSS rules in your own stylesheet:

h1 {  
  font-family: "minion-pro", "Times New Roman", serif;

}

The standard Typekit embed code also provides a set of font events that are triggered as fonts are loaded onto the page; read more about styling fallback fonts using font events.

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