Public Service Announcement: Watch Your @font-face font-weight

Chris Coyier //

Let's say you're browsing Google Web Fonts for a free font to use on your website. You find one you like...

You think it will look nice as headings on your site. So you follow the directions on Google Web Fonts "quick use".

1) Copy/Paste CSS link to page:

<link href='http://fonts.googleapis.com/css?family=Spicy+Rice' rel='stylesheet' type='text/css'>

2) Copy/Paste font-family CSS to your headings CSS:

h1, h2, h3, h4, h5 {
   font-family: 'Spicy Rice', cursive;

   /* Your other headings CSS */
}

And alas! You've done it, your headings are now in your specially picked out font:

But then you start to notice that the font is a bit muddier than you'd like. It might be hard to explain, but it just doesn't look as good as when you picked it off Google Web Fonts. Or maybe someone else notices and:

The problem is the font is muddier than you originally saw it, and it's all about font-weight.

You see, the default font-weight for headings in browsers is "bold" (or more specifically, 700). And if you looked carefully when choosing this font, you might have noticed:

You might fall prey to this if:

  1. You don't use a reset and didn't specify a font-weight for headings (defaults to user-agent style of bold).
  2. You use Normalize.css instead of a reset, which doesn't adjust the font-weight since bold is consistent cross-browser default.
  3. You explicity set font-weight to bold on headings (like you might if you use a reset).

This isn't Google Web Fonts or the font itself's fault. It's just this font doesn't come in a bold weight and you are asking for it specifically. That means the browser tries to bold the font for you, which is something it's able to do but isn't particularly good at (hence the muddiness).

Fixing it is as simple as being specific with your font-weight to match what the font offers.

h1, h2, h3, h4, h5 {
   font-family: 'Spicy Rice', cursive;
   font-weight: 400; /* Be specific */
   /* Your other headings CSS */
}

So yeah. In short:

This is a problem most common in decorative fonts where it's most common there is only one font-weight available. I'd say fonts from paid services like Typekit generally offer fonts with a wider variety of font-weights available, but that's not to say it can't be a problem with Typekit, as it's smart/recommended to load as few weights as you can get away with to lighten the load of your page.

Also note, this is a common problem with italics as well. Say you decide to load a normal, bold, and italic version of a font. If you then have text that is both bold and italic, the browser will have to fake it (because it doesn't have a bold-italic version available) and it will look bad. It happens to me on this site, but I don't think loading an extra whole version of the site is worth it so I just try to avoid it.