Font Family & Font Stacks

The font-family property specifies which typeface to use. Because fonts are not guaranteed to be installed on every device, you provide a font stack — a prioritised list of fonts ending in a generic family.

Generic Families

CSS defines five generic families as ultimate fallbacks: serif, sans-serif, monospace, cursive, and fantasy. Always end your stack with one of these.

System Font Stack

Modern sites often use the OS's own UI font for a native feel and zero network cost. The system font stack targets each major OS's native font.

Quoting Font Names

Font names containing spaces must be quoted. Single-word names may be unquoted.

Example

/* Custom stack with serif fallback */
body {
    font-family: "Inter", "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif;
}

/* Code blocks — monospace stack */
code, pre {
    font-family: "Cascadia Code", "Fira Code",
                 "Courier New", Courier, monospace;
}

/* System UI font stack */
.system-ui {
    font-family: system-ui, -apple-system,
                 BlinkMacSystemFont, "Segoe UI",
                 Roboto, Oxygen, Ubuntu, sans-serif;
}

/* Heading with display font */
h1, h2, h3 {
    font-family: "Playfair Display", Georgia,
                 "Times New Roman", serif;
}

/* Emoji font fallback */
.emoji {
    font-family: "Noto Color Emoji", "Apple Color Emoji",
                 "Segoe UI Emoji", sans-serif;
}

CSS

Full Editor

Pro Tip

List fonts from most to least preferred, and always end with a generic family — a user on a minimal Linux install may not have any of your named fonts, but the generic ensures they still see a legible result.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned