How do I use the font-family property?
Author: Deron Eriksson
Description: This CSS tutorial describes how to use the font-family property.
Tutorial created using: Windows XP

Page:    1 2 >

The font-family property can be used to set the "font family" that will be used for the display of an element's text. A "font family" is a group of fonts. Each "font face" of this group takes care of a style such as the normal, italic, and bold versions of the font family.

There are two types of font family names. The first type, "family-name", specifies the specific name of a font family. The second type, "generic-family", consists of five generic font family types that typically act as default font families to fall back upon if the specific family-names aren't available. There are five generic-family names: serif, sans-serif, monospace, cursive, and fantasy.

The serif and sans-serif font families are the most widely used, followed by monospace. The cursive and fantasy font families are not used very often, and cross-browser support can be an issue. A serif font has little strokes at the end of each glyph, whereas sans-serif fonts do not have these marks at the endpoints of each glyph. All the glyphs in a monospace font have the same width. "Times New Roman" is a typical serif font family, Verdana is a typical sans-serif font family, and Courier is a typical monospace font family.

The value of the font-family property is a comma-separated listing of family names, which can include both specific and generic family names. A web browser will use the first font family in the list that is found to be available. A generic family name can be used at the end of the list to specify a generic font family to fall back upon if previous font families in the list aren't found to be available. So, when using a specific font family, it can be a good idea to add the generic font family name to the end of the comma-separated list of font family names to ensure that the end user will be able to view the web page in an appropriate fashion if the desired specific font family (or families) isn't available.

If a specific font family-name contains whitespace or escaped characters, it should be surrounded by quotes (single or double). The generic-family names should not be surrounded by quotes.

(Continued on page 2)

Page:    1 2 >