Font families
After the color, the font is probably the most basic property of a page. On this page I won't show any "tricks," but I will show the range of font variations that CSS allows.
Since not all fonts are available on all computers (there are thousands of fonts, and most are not free), CSS provides a system of fallbacks. You list the font that you want first, then any fonts that might fill in for the first if it is unavailable, and you should end the list with a generic font, of which there are five: serif, sans-serif, monospace, cursive and fantasy.
The following table shows examples of various fonts (your browser may not know all of them) and you can see what your browser does with each of the five generic ones:
| Font family | Your browser | Sample image |
|---|---|---|
| 'sans-serif': normal fonts without serifs | ||
Arial, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Helvetica, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Verdana, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Trebuchet MS, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Gill Sans, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Noto Sans, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Avantgarde, TeX Gyre Adventor, URW Gothic L,
sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Optima, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Arial Narrow, sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
sans-serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
| 'serif': normal fonts with serifs | ||
Times, Times New Roman, serif
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Didot, serif
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Georgia, serif
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Palatino, URW Palladio L, serif
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Bookman, URW Bookman L, serif
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
New Century Schoolbook, TeX Gyre Schola, serif
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
American Typewriter, serif
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
serif
| The Quick Brown Fox Jumps Over The Lazy Dog | |
| 'monospace': fixed-width fonts | ||
Andale Mono, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Courier New, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Courier, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
FreeMono, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
OCR A Std, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
DejaVu Sans Mono, monospace
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
monospace
| The Quick Brown Fox Jumps Over The Lazy Dog | |
| 'cursive': fonts that emulate handwriting | ||
Comic Sans MS, Comic Sans, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Apple Chancery, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Bradley Hand, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Brush Script MT, Brush Script Std, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Snell Roundhand, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
URW Chancery L, cursive
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
cursive
| The Quick Brown Fox Jumps Over The Lazy Dog | |
| 'fantasy': decorative fonts, for titles, etc. | ||
Impact, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Luminari, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Chalkduster, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Jazz LET, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Blippo, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Stencil Std, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Marker Felt, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
Trattatello, fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | 
|
fantasy
| The Quick Brown Fox Jumps Over The Lazy Dog | |
