support > HTML and the Web > CSS Tutorials > Changing fonts in a stylesheet

Changing fonts in a stylesheet

To change fonts in a stylesheet, open the stylesheet (.css) file and look for code that looks like this, and edit it:

font-family: Verdana, Arial, Helvetica, sans-serif;

or

font: ........ Verdana, Arial, Helvetica, sans-serif;

Sometimes there may be just one font listed, sometimes there may be several fonts listed. The reason why you may want to list several fonts is because not every font is guaranteed to be on every viewer's computer. So in the font definition above, the first default font listed is Verdana. If for some reason your site viewer doesn't have the Verdana font on their system, the browser will then try to display the text in the Arial font. If they don't have Arial, the browser looks for Helvetica. If they don't have Helvetica, the default "sans-serif" font is displayed instead.

This is why it's important for you to use "generic" fonts that many people will have on their systems, and to stay away from "fancy" fonts that you may have downloaded for free, or that come on PC's but not on Macs.

If you change a font in your stylesheet, but there is an area in your web page that wasn't affected, you may have to look for other places where the font is referenced. For example, let's say that you change the default h1 font definition. When you preview your web page, most of the first-level headings are affected, but all the headings in the left column haven't changed. What's very likely in this case is that the developer has defined a special h1 style for the left column only. You'll want to look in the stylesheet for the class or ID selector of the left column - it may look something like class="leftcolumn", id="body2", id="left", within a table cell (<td>) or div (<div>) -- this will vary depending on the way the designer has set it up. Then, look in the stylesheet for other instances of h1 that are next to that class or selector. For example, it may look something like this:

#leftcolumn h1 { font .... }

If you still cannot figure out how to change the font for a particular area, contact the developer of the template for assistance.