Fonts give your text personality. Pick the right one and your page feels polished. Pick wrong and... well, we have all seen Comic Sans on a bank website.
The font-family Property
font-family is how you tell the browser which font to use. You list fonts in order of preference, and the browser picks the first one it has:
body {
font-family: Arial, Helvetica, sans-serif;
}The browser first looks for Arial. If it is not installed, it tries Helvetica. If that fails too, it falls back to whatever sans-serif font is available.
Font Categories
There are five generic families in CSS. The three you will use most are:
- serif — tiny feet on the letters (like Times New Roman). Feels formal and traditional.
- sans-serif — no feet. Clean and modern (like Arial or Helvetica).
- monospace — every letter takes the same width. Perfect for code.
.serif-text { font-family: "Times New Roman", serif; }
.sans-text { font-family: Arial, sans-serif; }
.code-text { font-family: "Courier New", monospace; }Web-Safe Fonts
Not every font works everywhere. Web-safe fonts are the ones you can count on being installed on most computers. Some common ones:
- Arial / Helvetica
- Times New Roman / Georgia
- Courier New
- Verdana
- Trebuchet MS
- Impact
Always include a generic fallback (serif, sans-serif, or monospace) as the last option. That way the browser always has something to show.
Quoted vs Unquoted Names
If a font name has spaces, wrap it in quotes. Single or double, both work. Single-word names like Arial are fine without quotes.
h1 { font-family: "Times New Roman", serif; }
h2 { font-family: Georgia, serif; }