CSS Font Families

Typography does more for a website than almost anything else, and it begins with one property. The font-family property tells the browser which typeface to render text in, and getting it right shapes both the visual identity of your site and how comfortably people can read it. The clever part is that you do not name a single font and hope for the best. You give the browser an ordered list of options, ending in a safe fallback, so the text always renders well even when your first choice is unavailable. This article explains how that list works, the difference between fonts already on a device and fonts you load yourself, the generic families that back everything up, and the habits that keep your typography fast and consistent.

The font stack

The key idea behind font-family is the font stack: a comma-separated list of fonts in order of preference. The browser tries the first one, and if it is not available on the user’s device, it moves to the second, then the third, until it finds one it can use.

body {
  font-family: "Open Sans", Arial, sans-serif;
}

Read this as “use Open Sans if you have it, otherwise Arial, otherwise any sans-serif font you do have.” The first entry is your preferred typeface, the middle entries are progressively safer alternatives, and the last entry is a generic family that the browser can always satisfy. Two small syntax points matter. A font name that contains spaces must be wrapped in quotes, as "Open Sans" is, while a single-word name like Arial does not need them. And the list should always end with a generic family, which we come to below, because that is the guarantee that text never falls back to something ugly or unreadable.

Fonts already there versus fonts you load

There are two broad sources of fonts, and the trade-off between them is reliability against creative freedom. Web-safe fonts are typefaces that are already installed on nearly every device, such as Arial, Times New Roman, and Courier New. Using them costs nothing to load and renders consistently everywhere, but your choice is limited to a small, familiar set.

Web fonts are custom fonts you bring in yourself, either from a service like Google Fonts or hosted on your own server, and they let you match a brand or reach for something distinctive. The cost is that they must be downloaded, which adds a request and can briefly delay text from appearing. Loading one from Google Fonts is a matter of a link in your HTML and then naming it in the stack.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">

body {
  font-family: "Roboto", sans-serif;
}

If you host the font yourself, you declare it with an @font-face rule that points at the font file, after which you can use its name in any font stack just like a built-in font. Either way, the principle is the same: name your web font first, then fall back to web-safe and generic options so the page still works while the font loads or if it fails to.

The five generic families

CSS recognises five generic families, the broad categories the browser falls back to, and knowing them helps you choose a sensible last resort. Serif fonts have small strokes on the ends of their letters and read as traditional and formal, like Times New Roman. Sans-serif fonts drop those strokes for a clean, modern look, like Arial and Helvetica, and are the most common choice for body text on screens. Monospace fonts give every character the same width, which is why they suit code, with Courier New and Consolas being typical. Cursive fonts imitate handwriting, and fantasy fonts are decorative display faces for headings and one-off effects. You name a generic family directly as the final fallback.

h1 {
  font-family: "Georgia", serif;
}

The lesson is to match the generic fallback to your real font, so a serif heading falls back to serif and a sans-serif body falls back to sans-serif, which keeps the character of your typography intact even when the exact font is missing.

Habits that keep typography solid

A few practices separate robust typography from fragile typography. Always end every stack with a generic family, because that single word is what guarantees the browser has something appropriate to use no matter what.

p {
  font-family: "Lato", "Helvetica Neue", Helvetica, sans-serif;
}

Use quotes deliberately, wrapping any multi-word name like "Times New Roman" and leaving single-word names like Arialunquoted. Mind the performance of web fonts, because a font that blocks rendering leaves your visitors staring at blank text. The simplest fix is font-display: swap, which tells the browser to show fallback text immediately and swap in the custom font once it arrives, and for critical fonts you can preload them so they download sooner.

@font-face {
  font-family: "CustomFont";
  src: url("customfont.woff2") format("woff2");
  font-display: swap;
}

Test your typography across browsers and devices, since the same stack can render subtly differently depending on what fonts are present. And limit how many different fonts a page uses, because each web font adds weight to load, and a restrained palette of two or three faces almost always looks more harmonious than a jumble of many.

Conclusion

The font-family property is the foundation of web typography, and the font stack is the idea that makes it reliable: list your preferred font first, follow it with safer alternatives, and always finish with a matching generic family. Choose web-safe fonts when reliability matters most and web fonts when you want a distinctive, branded look, mindful that the latter must download and should use font-display: swap to avoid blank text. Quote multi-word names, fall back to the generic family that suits your design, test across devices, and keep the number of fonts small. Do that, and your text will be legible, on-brand, and consistent for every visitor, whatever fonts their device happens to have.

See you soon.