Contact Us​​ | Status Blog
Help Center
Main Web Design and Development › Working with CSS selectors

Working with CSS selectors

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.

Screenshot of selectors area in kit editor

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.

Screenshot of invalid selector error in kit editor

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;

Screenshot of advanced selectors screen showing the Typekit font-family names

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