How to organize font-family declarations
While working on already existing code I often find font-family declarations spread throughout hundreds or sometimes thousands of lines of code. This is somewhat frustrating when my task is to change the font families, because I have to search through the CSS to find all the font-family declarations and then build a mental image just to figure out the current system behind the font family usage.
With font-family, you should have a clear plan for your website, and typically use no more than two or three font-families. If not, you will quickly end up with chaos and inconsistency, two qualities you don't want to be associated with your code. I prefer to gather all font-family declarations in the top of my CSS like this:
body {
/* a - font-e stuff */
font-family: "Liberation Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
/* font-g - z stuff */
}
h1, h2, h3, h4, h5, h6 {
font-family: FreeSans, "Helvetica Rounded", "Helvetica Neue", Helvetica, Arial, Serif;
}
/* More font-family declarations if needed */
/* All the rest of the CSS*/
So, the default font specified on the body element and then a headline font right after. If needed, I put further font-family declarations right after that. This is simple to do and leads to a font-family setup that is maintainable and easy to understand.