Font Family

A font family is a collection of related fonts that share a common design — the same basic letterform structure, proportions, and aesthetic character — but vary in weight, width, style, or other attributes. Helvetica is a font family; Helvetica Bold Italic is a single font within that family. Georgia is a font family; Georgia Bold is one of its members.

The concept of the font family organizes typographic variation into a coherent system. A well-designed family provides everything needed for a complete typographic hierarchy — light weights for captions, regular for body text, medium for subheadings, bold for headlines, and italic for emphasis — while maintaining visual consistency through shared design DNA.

/* font-family declares a prioritized list of typefaces */
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  /* If Inter isn't available, fall through to system fonts */
}

/* Importing a Google Font family with multiple weights */
/* In HTML: */
/* <link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..900;1,8..60,300..900&display=swap" rel="stylesheet"> */

/* Then in CSS: */
h1, h2, h3 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 700;
}

.article-body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 400;
  font-style: normal;
}

.caption {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 300;
  font-style: italic;
}

/* System font stack as font-family (no external request) */
.system-ui-text {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

The font-family property in CSS accepts a comma-separated list of font names in priority order — a font stack. The browser uses the first font it can load; if that fails, it tries the next; and so on until it reaches the generic family name (serif, sans-serif, monospace, etc.) which is always available as a fallback.

When using Google Fonts, selecting multiple weights from the same family in a single <link> request is significantly more efficient than multiple requests. The font API combines them into a single optimized CSS file. For variable fonts (increasingly common on Google Fonts), a single file covers all weights, making loading even more efficient.

Strong font families for web projects include Inter (sans-serif UI work), Source Serif 4 (long-form reading), and DM Mono (code contexts) — each designed as complete families with the range of weights needed for comprehensive typographic systems.