CSS - Fonts & Web Fonts

Print this lesson

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 15–20 minutes

Fonts shape your brand and readability. Learn system stacks, self-hosting with @font-face, and performance best practices.

Learning Objectives

Compose robust font-family stacks with fallbacks.
Load and self-host web fonts using @font-face.
Tune font loading for performance and FOUT/FOIT mitigation.

Details & Examples

/* System stack */
body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }

/* Self-hosted */
@font-face{ 
  font-family: "InterVar"; 
  src: url(/fonts/Inter.woff2) format("woff2"); 
  font-display: swap; /* avoid FOIT */ 
}
:root{ --ui-font: InterVar, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
body{ font-family: var(--ui-font); }

/* Properties */
h1{ font-weight: 700; letter-spacing: .01em; }
small{ font-variant: small-caps; }

Try it

HTML

CSS

Common Pitfalls

Omitting font-display causes invisible text during load (FOIT).
Loading too many weights/variants increases payload size.

Checks for Understanding

What does font-display: swap do?
Why provide a system font fallback stack?

Show answers

It shows fallback text immediately and swaps to the web font when ready.
Improves perceived performance and ensures readable text if fonts fail to load.

Exercises

Set up a self-hosted variable font with @font-face and font-display: swap; verify fallback then swap.
Create a system stack fallback and compare rendering/perf to a web font.