CSS font-family Property
The font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
Description & Usage
The font-family property defines the typeface used to display text.
It accepts a comma-separated list of font family names as a font stack. The browser traverses the list from left to right, using the first font installed on the user's device or loaded via @font-face.
Always end a font-family stack with a generic family keyword (such as sans-serif, serif, or monospace) to guarantee a consistent fallback.
Property Specifications
| Property Feature | Specification |
|---|---|
| Category | Typography |
| Initial Value | depends on browser user agent |
| Inherited | Yes (inherited from parent) |
| Applies To | All elements |
Syntax
font-family: "Inter", system-ui, sans-serif;Property Values
| Value | Description |
|---|---|
| sans-serif | Clean font without serifs (e.g. Arial, Inter, Helvetica). |
| serif | Classic font with decorative serifs (e.g. Times New Roman, Georgia). |
| monospace | Fixed-width font for code snippets (e.g. Consolas, Courier). |
Code Examples
Modern System Font Stack
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
Uses native OS system font for fast performance.