CSS Fonts
The font-family property tells the browser which typeface to render text in. You give it a stack — a prioritised list of fallbacks.
A safe font stack
CSS
body {
font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
The browser walks the list left-to-right: use the first font that's available, fall back to the next if not. The generic family at the end (sans-serif) is a guaranteed last resort.
The five generic families
| Generic family | What it looks like | Use it for |
|---|---|---|
sans-serif | Clean strokes, no decorative tails. | UI, body copy on screens. |
serif | Small projections at the ends of strokes. | Long-form reading, editorial. |
monospace | Every character the same width. | Code, tabular data. |
cursive | Handwriting-style. | Decorative headings (sparingly). |
fantasy | Decorative, varies wildly by OS. | Rarely — preview before shipping. |
Loading a web font
HTML + CSS
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
body { font-family: "Inter", system-ui, sans-serif; }
Note: Quote multi-word family names (
"Times New Roman"). Single-word names don't need quotes but it's fine to add them for consistency.Tip: Add
system-ui early in the stack to inherit the OS default UI font — fast loading, looks native on every platform.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Fonts</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Add the generic fallback so users without Inter still get a sans-serif face.
body { font-family: "Inter", system-ui,
; }
The most common generic family for UI text.
Discussion
Loading…