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:
- You don’t use a reset and didn’t specify a
font-weight
for headings (defaults to user-agent style ofbold
). - You use Normalize.css instead of a reset, which doesn’t adjust the
font-weight
sincebold
is consistent cross-browser default. - You explicity set
font-weight
tobold
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.
Great post! Love the use of meme-faces!
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.
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.
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
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 :)
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 :)
wow thanks chris
I have noticed this muddiness before and could NEVER explain it and now i feel so happy
<3
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.
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
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.
U MAD, BRO!?
Aha, only joking. Good post, Chris; definitely something worth reading.
Ahh, thanks! I had unwittingly fallen prey to this issue when I used the “Lobster” font in a heading on one of my sites.
excellent explanation. i tried working my head around this recently and was frustrated to no end :-P
the faces are perfect!
Isn’t bold defined as 700, not 800? I don’t have a source, that’s just what I’ve always understood it as.
Correct. Fixed.
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.
Sorry, but I have never fallen pray to this. Once I fell prey and I felt bad.
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.
Nice to see you using some Troll faces in your post.
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.
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
I thought everyone did that. I think tools like Font Squirrel’s generator even output example CSS like that to go with the font files.
“your browsing”? Chris, I am dissapoint :P
Thanks for this tip. As always, I learned something from css-tricks :)
Fixed that typo, thanks.
Keep using meme-s .. That adds more spicy to your delicious articles ;)
memes, u’r doing it right!
In both figures, “I luvvv it” and “Why u hate fonts?”, the fonts are identical to the pixel, Chris.
Correct. You see it work and are happy, but then realize soon after something isn’t quite right.
Great info, Like the stick dude!
Seems like Chris discovered 9gag.com nice post, loved the memes.
Useful, thanks for clarifying this stuff, I have certainly been caught out with the font-weight of imported fonts.
Thanks Chris!
Started playing with Google fonts like a week ago. Your post could not have come at a better time.
Thanks Chris!
To ensure font-weight heritage for headings with links inside also on IE8 , I recommend this:
However IE7 still need specific classes like
New Twitter using this trick, take a look at line 123 on this pastebin
Happy New Year, Chriscoyier!
So cool *_*
Thanks for sharing this, I have noticed too how some fonts do not scale properly. I prefer @FontFace to using Cufon.
Thanks Chris, extremely useful article! love this site!
Meme Faces = Win
Fixing A Problem I had = Win
Meme Faces + Fixing A Problem I Had = DOUBLE RAINBOW!
Thanks Chris!
this helped a lot. thanks!
I’ve run into this before but I didn’t know what it was. Thanks and I love the Meme faces too!
Happy New Year,
I don’t Know about @font-face before reading this article, this helped a lot. Thanks!
Balakrishna
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.
Great stuff! Useful!
Great timing, I just ran into this issue. Thanks Chris.
Great post, very useful! I already had this problem using @font-face rules with a CSS reset.
Nice Chris Coyier for digging in that! ;-) Cheer!
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.
Thanks so much for taking the time to post this! I was having the exact same problem and was getting really frustrated!