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. Code Style has some helpful resources on building CSS stacks.

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.

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.

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.