This is much better than linking each weight and style into a separate font-family name (like "ProximaNovaRegular"). Having a separate font-family name for each weight and style requires us to redefine the entire font-family stack (including fallbacks) over and over every time a new weight or style is called for. It also breaks browser default styles, and worse, it can cause some browsers to synthesize faux bold and oblique styles for fonts.

Using variation-specific names in IE 6-8

Unfortunately, not all browsers conform to the specification when it comes to @font-face. In particular, IE 6-8 have some bugs that limit the usefulness of linking multiple fonts into a single family.

The biggest bug prevents us from linking more than four weights and styles into a family in all three browsers. Other bugs that only affect IE8 are triggered by families when more than one weight and style is linked. In these cases, we must give up some of the convenience of linking multiple weights and styles for the sake of compatibility.

That’s where Typekit’s newly added variation-specific font-family names come in. These additional families are only added in IE 6-8, and they make it possible to work around the bugs and limitations in these older browsers. They’re designed to 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 first variation-specific name is only defined in IE 6-8, so those browsers will make use of the unlinked family name. Browsers that don’t have issues with linking will make use of the full family name that comes second in the stack, since the variation-specific name is undefined in those browsers.

These additional family names each contain a single font, so they’re guaranteed not to trigger bugs related to linking multiple weights and styles. The names consist of the normal font-family name, followed by a dash, followed by a font variation description (or FVD). So, for example, the variation-specific font-family name for proxima-nova that contains only the italic 400 weight font would be proxima-nova-i4. If your kit uses the old style segmented font-family names (like proxima-nova-1, proxima-nova-2), simply strip off the trailing number and add the FVD (again, proxima-nova-i4).

You can easily 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. Use the handy button to copy font-family, font-style, and font-weight CSS declarations in one click.

Click "Using weights & styles in CSS" and check the box at the bottom to see variation-specific font-family names in the Kit Editor.

Many users won’t need to make use of these additional font-family names at all. 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 now 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.

Again, if you’re not experiencing problems in IE 6-8, you don’t need to worry about variation-specific font-family names. In fact, many users won’t have to use them, because they’re using weights and styles that don’t happen to trigger a bug. But when problems do arise, these additional font-family names provide a powerful workaround for these older browsers.