Grow your CSS skills. Land your dream job.

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

Published by 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.

Comments

  1. Permalink to comment#

    Great post! Love the use of meme-faces!

  2. I’ve noticed some variations in Google font display as well, so that’s a good tip to be very specific in identifying weights. Love the illustrations too, btw.

  3. the default font-weight in browsers is “bold” (or more specifically, 800)

    This is only true for headings.

    • Well, and some other elements, of course; just wanted to clarify that it’s not the default for everything.

    • Permalink to comment#

      I second that. Chris, for the sake of clarity, you should repeat that you’re talking about headings here.

    • I updated it to be more specific.

      Also, it’s 700 not 800 and I fixed that.

      Also, worth noting that the default style for <strong> is “bolder” which is a specific keyword that increases the font weight relative to what it inherits, which can also cause the problems illustrated in this article. Mapping:

      inherited bolder
      100 400
      200 400
      300 400
      400 700
      500 700
      600 900
      700 900
      800 900
      900 900

  4. Permalink to comment#

    Hi Chris

    I never comment here but I always follow your posts with great interest, but today I wanted to say I really loved the extra meme faces :)

  5. Julian
    Permalink to comment#

    I like this article, but I find that font-face is a little too new. These web fonts each behave differently, so adjusting text-indent, padding, etc. will be almost impossible for fallbacks.

    I hope that everyone’ll get a newer browser :)

  6. Permalink to comment#

    wow thanks chris

    I have noticed this muddiness before and could NEVER explain it and now i feel so happy

    <3

  7. Permalink to comment#

    I have quite a different problem with some of the WebFonts. They appear “pixelated”, and very distorted. I use the regular font-weight (400) for Droid Sans and no matter what, the fonts look like shit. I used some tricks (small stroke, antialias, etc.) but it still looks terrible. Any idea why?
    I have an example here: http://antjanus.com/testing

    • I see no problem with the fonts; they’re all perfectly smooth. I’ve had this problem on Windows, whilst they work nicely in my Mac. Could be that.

      I’ve had problems with @font-face, but sadly not due to this, so they’re still unfixed, even whilst using read-made CSS for them.

    • Permalink to comment#

      Thanks. They appeared correctly on my Mac too, just not on the PC. It’s very bothersome.

      Interesting note, I tested the site in browserlabs and received mixed results, one of them being that Chrome 14 renders the font like utter crap while Chrome 13 renders it perfectly o.o (regardless of system). Bizarre

  8. As always, good tips. Yeah, I had gotten bit by an @font-face issue once and it was driving me crazy due to a weight situation. I eventually figured it out but hopefully anyone running into this issue again finds your post straight away.

  9. Permalink to comment#

    U MAD, BRO!?

    Aha, only joking. Good post, Chris; definitely something worth reading.

  10. Adam
    Permalink to comment#

    Ahh, thanks! I had unwittingly fallen prey to this issue when I used the “Lobster” font in a heading on one of my sites.

  11. Permalink to comment#

    excellent explanation. i tried working my head around this recently and was frustrated to no end :-P
    the faces are perfect!

  12. Zach Handing
    Permalink to comment#

    Isn’t bold defined as 700, not 800? I don’t have a source, that’s just what I’ve always understood it as.

  13. PVieira
    Permalink to comment#

    I thought I clicked the wrong favorite link and went to 9gag. Nice adding.

    How do you find this explanations? I had this problem before but could explain it, thank you.

  14. Ted
    Permalink to comment#

    Sorry, but I have never fallen pray to this. Once I fell prey and I felt bad.

  15. Permalink to comment#

    This is really informative. I’ve been running into that a lot lately and had convinced myeslf I was just going crazy!

    Loving the meme’s BTW.

  16. Permalink to comment#

    Nice to see you using some Troll faces in your post.

  17. TeMc
    Permalink to comment#

    This is also why one (when creating your own @font-face rules) should not include “Bold” in the font-family name and do specify the font-weight in the @font-face rule.

    Also, not known very much, you can have several @font-face rules for the same font-family with with different font-style and/or font-weight.

    
    @font-face {
      font-family: 'Foo';
      font-weight: normal;
      src: url(./fonts/FooRegular.woff) format('woff');
    }
    @font-face {
      font-family: 'Foo';
      font-weight: bold;
      src: url(./fonts/FooBold.woff) format('woff');
    }
    @font-face {
      font-family: 'Bar';
      font-weight: 100;
      src: url(./fonts/Foo1.woff) format('woff');
    }
    /*..*/
    @font-face {
      font-family: 'Bar';
      font-style: italic;
      font-weight: 800;
      src: url(./fonts/Foo800i.woff) format('woff');
    }
    

    That way, when you use it in your stylesheet, fallbacks will also get the right format. So if you have a h2 { font-family: Bar, sans-serif; font-weight: bold; font-style: italic; it’ll pick the closest one in the @font-face rules, and if the font is not found, it’ll use a fallback font and use the same weight/style properties to determine that.

    I see quite a few sites doing “font-family: SomethingBold; font-weight: normal;” and have a css reset and then do “h2 { font-family: SomethingBold, Arial; }” that causes:
    – Unbold fallback when font not found
    – Unbold fallback during loading of font

  18. Permalink to comment#

    your browsing”? Chris, I am dissapoint :P

    Thanks for this tip. As always, I learned something from css-tricks :)

  19. Permalink to comment#

    Keep using meme-s .. That adds more spicy to your delicious articles ;)

  20. gustavodiazjaimes
    Permalink to comment#

    memes, u’r doing it right!

  21. Uli
    Permalink to comment#

    In both figures, “I luvvv it” and “Why u hate fonts?”, the fonts are identical to the pixel, Chris.

  22. Great info, Like the stick dude!

  23. Dor
    Permalink to comment#

    Seems like Chris discovered 9gag.com nice post, loved the memes.

  24. Permalink to comment#

    Useful, thanks for clarifying this stuff, I have certainly been caught out with the font-weight of imported fonts.

    Thanks Chris!

  25. Tieson Wooten
    Permalink to comment#

    Started playing with Google fonts like a week ago. Your post could not have come at a better time.

    Thanks Chris!

  26. To ensure font-weight heritage for headings with links inside also on IE8 , I recommend this:

    h1 a,
    h2 a,
    h3 a,
    h4 a,
    h5 a,
    h6 a { font-weight: inherit }
    

    However IE7 still need specific classes like

     h1 a { *font-weight: 400 }

    New Twitter using this trick, take a look at line 123 on this pastebin

  27. porpor
    Permalink to comment#

    Happy New Year, Chriscoyier!

  28. Permalink to comment#

    So cool *_*

  29. Thanks for sharing this, I have noticed too how some fonts do not scale properly. I prefer @FontFace to using Cufon.

  30. Jank!
    Permalink to comment#

    Thanks Chris, extremely useful article! love this site!

  31. Permalink to comment#

    Meme Faces = Win
    Fixing A Problem I had = Win

    Meme Faces + Fixing A Problem I Had = DOUBLE RAINBOW!

    Thanks Chris!

  32. this helped a lot. thanks!

  33. Permalink to comment#

    I’ve run into this before but I didn’t know what it was. Thanks and I love the Meme faces too!

  34. Happy New Year,

    I don’t Know about @font-face before reading this article, this helped a lot. Thanks!

    Balakrishna

  35. Thanks for telling about the font weight thing , always thought why there was slight difference in the way the font looked on my blog as compared to Web Fonts gallery.

  36. Great stuff! Useful!

  37. Great timing, I just ran into this issue. Thanks Chris.

  38. Florian Hamberger
    Permalink to comment#

    Great post, very useful! I already had this problem using @font-face rules with a CSS reset.

  39. porpor
    Permalink to comment#

    Nice Chris Coyier for digging in that! ;-) Cheer!

  40. anne
    Permalink to comment#

    haha oh my god – I’ve been trying to override my themes default fonts forever and this did the trick in 3 minutes. I’m such a newbie anyways! Thank you so much for this.

  41. Brian
    Permalink to comment#

    Thanks so much for taking the time to post this! I was having the exact same problem and was getting really frustrated!

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".