A system font is a typeface installed on a user's computer and available to that user's web browser. CSS selects it with the font-family property. section 4.3 section 4.14
Use system fonts reliably by remembering these rules:
- Put font names containing spaces, numbers, or punctuation other than hyphens in quotation marks; capitalization is optional but improves readability. section 4.3
- List several families with commas. The browser checks them in order and uses the first installed family. section 18.2
- Finish with a similar generic family such as serif, sans-serif, or monospace when possible. section 4.3 section 18.2
A dependable sans-serif choice
div { font-family: Verdana, sans-serif; } The browser uses Verdana when installed and otherwise falls back to a generic sans-serif. No font-related drama required. section 4.3
Backing up a less-common font
body { font-family: Optima, Calibri, sans-serif; } This stack prefers Optima, tries Calibri when Optima is unavailable, and then uses a generic sans-serif. section 10.3
