The font-family property allows you to specify the typeface for selected elements. It is one of the most fundamental properties in web design, as it dictates the visual tone of your text.

Generic Families

Generic families act as a fallback mechanism. If specific fonts are not available, the browser chooses a default font from the specified generic category.

• Serif: Fonts with small lines or strokes at the ends of characters (e.g., Times New Roman, Georgia).
• Sans-serif: Fonts without these lines, often cleaner and modern (e.g., Arial, Helvetica).
• Monospace: Fonts where every character has the same width (e.g., Courier New).
• Cursive: Fonts that imitate handwriting.
• Fantasy: Decorative fonts.

The "Stack"

You should always provide a "stack" of fonts. The browser checks them in order. If the first isn't installed on the user's device, it checks the second, and so on.

Always end your stack with a generic family name to ensure the browser picks something appropriate if all else fails.

Quotes

If a font name contains whitespace, it must be quoted. For example: "Times New Roman" or "Courier New". Single-word names like Arial do not need quotes.