Episode 27 of 53

The Font Family

Learn how to set fonts in CSS, use web-safe fonts, and load custom fonts from Google.

The font-family property specifies the typeface used for text. You should always provide a fallback stack.

Font Stacks

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

The browser uses the first font it finds installed. The last entry should be a generic family.

Generic Font Families

  • serif — fonts with small strokes (Times New Roman)
  • sans-serif — fonts without strokes (Arial, Helvetica)
  • monospace — fixed-width fonts (Courier New)
  • cursive — handwritten style
  • fantasy — decorative fonts

System Font Stack

Use the operating system's native font for a clean, fast-loading look:

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

Google Fonts

Load custom fonts from Google Fonts by adding a <link> in your HTML:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
body {
    font-family: 'Inter', sans-serif;
}

Best Practices

  • Always include a generic fallback
  • Quote font names that contain spaces
  • Limit the number of custom fonts (2-3 max) for performance