Typography: Font Families and Web Fonts

9 min read

Font Families and Font Stacks

The font-family property accepts a comma-separated list of font names. The browser tries the first font, falls back to the second if unavailable, and so on. Always end with a generic family like serif, sans-serif, or monospace.

css

body {
  /* Font stack: try Inter, then system fonts, then generic */
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

code, pre {
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

Loading Web Fonts with @font-face

css

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

Google Fonts (HTML link method)

html

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

font-display: swap tells the browser to show fallback text immediately while the custom font loads, preventing invisible text (FOIT).

Ready to test yourself?

Practice CSS— quiz & coding exercises