CSS font loading: keep content readable while a font arrives

Last updated: 5 Oct 20265 min read

tutorial

The @font-face rule names a downloadable font resource. font-display controls the browser's display strategy while that resource loads.

How the rule works

A case portal uses a house typeface for headings, but the incident text must remain readable during a slow font request. Declare the local file and a system fallback, then inspect whether swapping fonts changes line breaks or button widths. The source path in the sample must be shipped with the site and licensed for the intended use. A font face can cover only part of a character set; missing glyphs still need a fallback. Do not preload every weight or language subset merely because a design file lists them. Measure the bytes and identify which faces the first screen actually uses.

@font-face {
  font-family: "Case Sans";
  src: url("/fonts/font-0.woff") format("woff");
  font-display: swap;
}
.case-portal { font-family: "Case Sans", system-ui, sans-serif; }

Cost and verification

The font request and decoding cost more than the CSS declaration. A fallback avoids invisible text, though a later swap can move content. Check the shipped file, its licence, glyph coverage, and final line wrapping. The sample points at an existing local asset, but its family name is an editorial alias; assess its actual metrics before using it on a production design. Keep controls wide enough for both fonts.

Common Mistakes

Do not assume a local path works after deployment without checking the asset.
Do not omit a fallback family.
Do not load unused weights on the first screen.

Connected lessons

Property decisions

CSS font shorthand and fallback stack: keep type stable during loading

Further form and type decisions

Further type and color decisions

Further rendering decisions

CSS unicode-range: request only the font subset a page uses

css

type-media

web