Contact Us​​ | Status Blog
Help Center
Main Web Design and Development › Using multiple weights and sty...

Using multiple weights and styles

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.

Screenshot of advanced page showing the numeric weight values

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; 

Using variation-specific names in IE 6-8

Internet Explorer 6, 7, & 8 load a maximum of four weights per family.  Additionally, 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 only 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. 

Screenshot of variation specific CSS family 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 6-8
All three of the older IE browsers have a bug that limits them 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 in these browsers, 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
Aside from the four weights and styles limitation, IE8 has additional limitations. Certain combinations of weights don't work together when linked into the same font-family name. Using variation-specific names is a valid workaround for this problem.

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.

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