Font Family
A font family is a collection of related typefaces sharing a design but varying in weight, style, or width. For example, the Inter family includes weights from 100 (Thin) to 900 (Black).
Example
In Practice
The font-family CSS property accepts a comma-separated stack of font names. The browser uses the first font it finds on the user's system. Always end the stack with a generic family keyword: serif, sans-serif, monospace, or cursive. Font Blend's production code exports include the correct generic fallback for each font category. See the font stack tool to build a complete font stack for any typeface.
Common Mistakes
The common mistake with most typographic terms is applying them without considering how they interact with other settings. Type is a system: changing kerning affects tracking, changing size affects leading, changing measure affects line-height. Test changes in context rather than in isolation.
The font-family stack in practice
A font family is one design drawn across many weights and styles, and the CSS font-family property names the one to use. The stack matters because the browser walks the list left to right until it finds a family it can satisfy. A healthy stack names the real font first, a nearby fallback second, and a generic family last, so the page never renders in the browser default.
Quoting the family name is only required when it contains spaces, but it is harmless everywhere and avoids surprises. For interface code, a pragmatic stack is Inter, the system UI fallback of the platform, then sans-serif. The pattern keeps you honest about what you control: the first family is the design, the rest are insurance. The fonts page lists exactly which families ship which weights, so the stack you write matches the files you load.