Font-display is a descriptor inside @font-face that influences the browser's font loading and swap periods. It controls presentation timing, not the file's size or whether the request succeeds.
Make this comfortable
CSS font-display: choose what readers see while a font loads
When to use it
A receipt archive uses a custom heading face, but its titles must remain readable if the asset is slow or absent. Set a system fallback in the heading stack and choose an appropriate display policy for the face. The sample uses swap, which may show fallback text first and then replace it; that can cause a visible change in line breaks. The font URL is illustrative and must be replaced with a licensed, optimized asset before reuse. Test a slow connection, a blocked request, and a narrow title. Preloading every font file can waste bandwidth, so measure the few assets that matter to the first screen. Body copy may be better served by a stable system face.
@font-face { font-family: 'Receipt Header'; src: url('/assets/receipt-header.woff2') format('woff2'); font-display: swap; }
.receipt-archive__title { font-family: 'Receipt Header', system-ui, sans-serif; }Cost and verification
The expensive part is the font transfer and any layout shift when the face replaces fallback glyphs. Font-display does not eliminate those costs. Check the file's subset, compression, cache behavior, and actual use before loading it site-wide. Licensing must permit web embedding. A fallback stack should produce sensible weight and line breaks, and critical text must not remain invisible just to preserve a visual brand. Compare several display policies under realistic network conditions instead of assuming one value is correct for every font role.
Common Mistakes
- Do not ship the illustrative font path or an unlicensed asset.
- Do not assume swap prevents layout shifts.
- Do not load a custom face for every small icon or number.
Connected lessons
css
reference
web