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.

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>