A CSS selector is used to declare which elements a style applies to. In Typekit, you can specify the selectors for each of your fonts in one of two ways: By adding the selectors to your kit. By using the provided font-family names in your own CSS.
In your kit, simply add the selectors to each font, and republish your kit. A selector may be an element name (body, h1), an ID (#nav, #footer), or a class (.entry, .date). We recommend using the Firebug extension to Firefox or the web developer tools in Safari or Chrome to aid in identifying which selectors to use.
The following characters are allowed in the CSS selectors:
a-z A-Z 0-9 . # -_ [] () = " ' ~ ^ $ | : > + \ *
When you add a selector to the kit, it is validated against this list of characters. If a selector isn’t valid, the kit will show an error.
If you need a selector to include a character that isn’t in this set, use a backslash escape (for example, \7B to create {.
When adding selectors, make sure that they are specific enough to override the existing styles in use on your site. For example, if you add h1. to your kit, but your stylesheet has font styles applied to h1#site-title., your Typekit fonts will be overridden by the more specific styles in your stylesheet. (In this case, you’d want to use h1#site-title. in your kit instead.)
If you want to use Typekit in your CSS, click the “Using fonts in CSS” link in the selectors area of your kit to reveal the appropriate font-family names to use. Once you’ve included the Typekit embed code in the <head> of your documents, you can add these font-family names to the CSS rules in your own stylesheet:
h1 {
font-family: "proxima-nova", sans-serif;
}
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.
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.
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.
In CSS, you can specify font-weights other than normal and bold by using numeric font-weight values. Here is a list of which numeric values most frequently correspond to which weights:
- 100 = thin
- 200 = extra-light
- 300 = light
- 400 = normal, book
- 500 = medium
- 600 = demi-bold
- 700 = bold
- 800 = heavy
- 900 = black
You can find the numeric values for your font by clicking the “Using weights & styles in CSS” link under the weights and styles section of the kit editor. In your kit editor, you can also select which weight and styles you want to include in your kit; turn off any weights or styles you won’t need to reduce the size of your kit.
Say, for example, that you’ve applied a font to your h1 elements that has a “thin” weight, you could use this CSS in your stylesheet to make the text render in that weight:
h1 {
font-weight: 100;
}
Internet Explorer 8 loads a maximum of four weights per family, and using two closely-related weights (e.g., 400 and 500) may result in only one weight loading correctly. Typekit serves variation-specific font-family names to those versions of the browser to work around both of these bugs.
The variation-specific name should be added at the beginning of a font-family stack as needed, before the main Typekit family name:
#post-title {
font-family: "proxima-nova-n6", "proxima-nova", sans-serif;
font-style: normal;
font-weight: 600;
}
The names consist of the normal font-family name, followed by a dash, followed by a font variation description (or FVD). For example, the variation-specific name for proxima-nova that contains the normal 600 weight font is proxima-nova-n6.
The variation-specific name will be undefined in browsers that don't have these issues, so they will use the full family name that comes second in the stack.
You can find the appropriate variation-specific font-family name for each weight and style within the kit editor. Select a family on the right, then click "Using weights & styles in CSS" on the left and check the box at the bottom to show variation-specific names.
Many users won't need to make use of these additional font-family names. You'll only need to add them if you're trying to work around any of the following issues:
Trying to use more than four weights and styles in a single family in IE 8
The browser has a bug that limits it to four weights and styles linked to a single font-family name. In these browsers, Typekit has always filtered the enabled weights and styles down to fit within the constraints. If you want to use more than the filtered set, you can use variation-specific font-family names to get around the limitation.
Certain weights not showing up in IE8 when used in combination with other weights
Certain combinations of weights don't work together when linked into the same font-family name. Using variation-specific names is a workaround for this problem as well.
Spacing randomly changing between page refreshes in IE8
When more than a single weight or style is linked to a font-family name, IE8 has a few more bugs that crop up occasionally. IE8 will sometimes randomly alter the letter spacing or line-height of fonts when any linking is used. Adding a variation-specific font-family name prevents this bug from triggering.
Fonts on the page randomly changing when using iframes in IE8
Another bug triggered by linking in IE8 causes fonts to flicker, appear, or disappear randomly when iframes are used on the page. This is commonly seen when using components that use iframes under the covers, like the Facebook “Like” button or certain modal dialogs that display content from other pages. Adding a variation-specific font-family name works here as well.
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.