So you’ve made the decision to use webfonts on your website, which is great, because webfonts are amazing. Typography is incredibly important, especially for setting the tone and expectations for the user about what they’re viewing. It can be difficult to achieve those things with system fonts, and you can’t always rely on the user having those fonts to begin with.

This isn’t about which fonts to pick, or why. There are plenty of good articles on that. This is about one common problem I see when people are using webfonts, and it’s all about the CSS. The usual webfont package

Depending on where you get your webfonts, whether it’s MyFonts, Font Squirrel, or somewhere else, you usually end up selecting a font (or two) that you like, some different weights, then downloading a package including everything.

This package often comes with an example CSS file that helps you get started using your webfonts, and can look something like this:

@font-face {
    font-family: 'ambleregular';
    src: url('Amble-Regular-webfont.eot');
    src: url('Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Amble-Regular-webfont.woff') format('woff'),
         url('Amble-Regular-webfont.ttf') format('truetype'),
         url('Amble-Regular-webfont.svg#ambleregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'amblebold';
    src: url('Amble-Bold-webfont.eot');
    src: url('Amble-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Amble-Bold-webfont.woff') format('woff'),
         url('Amble-Bold-webfont.ttf') format('truetype'),
         url('Amble-Bold-webfont.svg#amblebold') format('svg');
    font-weight: normal;
    font-style: normal;
}

As you can see, there’s a webfont declaration for every font and font weight combination that you downloaded. Just copy and paste that into your site’s CSS and you’re done, right? Wrong.

Defining your font face

I’m going to transform the above example of the font Amble. We have two weights that we want to use: regular, and bold. The way that the font faces are currently defined, how would we write CSS rules to make use of these fonts? Probably something like this:

body {
  font-family: 'ambleregular', sans-serif;
}

h1, h2, h3, h4, h5, h6, strong {
  font-family: 'amblebold', inherit;
}

The above does work, but it’s very annoying having to define all of the default “bold” tags to use this bold weight version of the font.

To improve this, take a look at the @font-face declarations. The important properties we need to look at are: font-family and font-weight. The way @font-face works, is that the browser looks at the current font-family of an element, and if the font-weight and font-style match the defined @font-face, it will use the provided font from src. So our redefined @font-faces should look like this:

@font-face {
    font-family: 'amble';
    src: url('Amble-Regular-webfont.eot');
    src: url('Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Amble-Regular-webfont.woff') format('woff'),
         url('Amble-Regular-webfont.ttf') format('truetype'),
         url('Amble-Regular-webfont.svg#ambleregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'amble';
    src: url('Amble-Bold-webfont.eot');
    src: url('Amble-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Amble-Bold-webfont.woff') format('woff'),
         url('Amble-Bold-webfont.ttf') format('truetype'),
         url('Amble-Bold-webfont.svg#amblebold') format('svg');
    font-weight: bold;
    font-style: normal;
}

What I changed:

• The font-family of both declarations to be the same name: ‘amble’
• The font-weight of the “bold” @font-face has been changed to bold

In order to get the same outcome from before, now we only need to define the following CSS rule:

body {
  font-family: 'amble', sans-serif;
}

Any further text that happens to be defined as bold (has a font-weight of bold), will end up using the bold @font-face, without having to specify exactly which @font-face to use.

TypeKit does it right

TypeKit know what they’re talking about, and have written an amazing article explaining the problem in detail. They’ve even got you covered with some alternate font family names for older versions of Internet Explorer that only support four weights per font.

If you use TypeKit for your webfonts, you shouldn’t need to do anything I’ve mentioned in this post.

Conclusion

I hope this helps you to improve your CSS knowledge, and your webfont usage overall. I’d recommend subscribing to the TypeKit Blog as they’re constantly publishing useful articles on webfonts.