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.
Adding Selectors to Your Kit
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, e.g. \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.)
Using the font-family Names in Your CSS
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;
}