Font Families

In the new University templates, the font family for the side menu has been defined for you as Verdana. For the rest of the content on the page, you can define your own fonts. Fonts that you have defined in your current HTML pages using the <font> tag will not be lost. But there is a better way: Cascading Style Sheets (CSS).

You can apply a font-family to your entire page by adding it to the <body> tag in your style sheet. You can then apply different font families to specific elements in your site.

body {font-family: Verdana, Ariel, sans-serif;}
h1, h2, h3 {font-family: Georgia, "Times New Roman", serif;}

If you apply the above style sheet to your Web page, all the text will appear in Verdana except for the three headings, which will always appear in Georgia.

List multiple font family values ...

The use of a specific font family is dependent on that font being available on your user's Web browser. Most of the fonts available in Web editing programs like Dreamweaver are pretty widely used, but you can never really be sure. Therefore, it is best to declare multiple font families, like in the example above. The browser will try to use the first font listed, and then will move on to the next font if that one is not available. Always end your font family declaration with a generic font like serif or sans-serif. And remember to use quotes around font families with spaces in their names, like "Times New Roman".

...but don't use too many fonts!

Trying out new fonts can be fun, but fonts also carry meaning in that they help organize the content and the ideas on your Web page. If some headers are in Times New Roman, and some are in Courier, and still others are in Arial, it can cause confusion amongst your readers, who will wonder why one header is different from another. The same is true of body text, and can be especially troublesome with link text. A good rule of thumb: Choose one serif and one sans serif font, and apply them consistently.