How many times have you worked on somebody else’s CSS file and had to do a search and replace for font-families to produce consistency? Or worse, how often have you made a quick change that you thought updated a particular typeface (no global search and replace) only to discover that the wrong font is inherited higher up in the chain? I’m thinking mainly of some pretty well-selling WordPress themes, but even Roots was guilty as I recall. It’s everywhere!
For any site, you should be declaring font family (whether with “font” shorthand or “font-family” explicitly) exactly ONCE for any given typeface. Just as anywhere else in the development cycle, the principle of DRY (don’t repeat yourself) applies.
The body
Some sites use the same font for both copy and headers. But your site is probably not like that. None of mine are. You should set your intended copy font to the body element, so that it is the default font for the entire site:
body {
font-family: SomeFont, SomeFallback, sans-serif; /* or serif! */
}
If you are EVER redeclaring this font stack somewhere else in your document, I’ve got $5 that says you are doing something wrong.
Headings
A great many sites use the same font for all headings. If that’s not you, adjust accordingly! Otherwise, you should declare something like this:
h1, h2, h3, h4, h5, h6 {
font-family: SomeOtherFont, SomeOtherFallback, serif; /* or sans-serif! */
}
Break it up if you need to. Maybe minor headings use the same font as the copy font, but bold. Adjust accordingly!
Other Exceptions
It goes without saying that if your site uses other fonts for specific purposes, you should only declare those once, too. If you use a monospaced font for <pre> and <code> tags, set it! If blockquotes get some sort of fancy different font, set that, too! But set it only once per font. Let’s make a contrived example: I have decided that my emphasized words are going to be set in “ScriptyDoo Hand”. But not only that, everything in the footer and all dialog boxes will be in the same font. This is basic CSS, folks:
em, .footer, .dialog {
font-family: "ScriptyDoo Hand", cursive, serif;
}
Add When Needed
Just because I have a rule for what was originally meant to be “headings” doesn’t mean I can’t extend it. Maybe footers are going to use that font instead of the cursive font. Just add it to the original rule. ‘Cause if you don’t, I’mma holler at you.
h1, h2, h3, h4, h5, h6, .footer { /* you get the drill */ }
Conclusion
To the intermediate and expert CSS developer, this is ancient hat. But the sheer volume of CSS I see with redundant font-family declarations means that I have an obligation to guide people towards a cleaner approach. It’s for my own sanity. If you get some benefit out of it, though, great!