Web Fonts

Web fonts are font files, usually in WOFF2 format, that are loaded by a page through the CSS @font-face rule. They let designers use any typeface without relying on what the visitor has installed.

Why it matters

Fonts are render-blocking resources in practice: text may be invisible or swap styles while they load, which hurts perceived speed and layout stability. Each weight and style is a separate file, so five variants can add hundreds of kilobytes. Choosing the right format, subsetting and loading strategy keeps typography from slowing the site.

Example

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
body { font-family: "Inter", system-ui, sans-serif; }

font-display: swap shows fallback text immediately and swaps in the web font when ready. The fallback list after the font name keeps text readable if loading fails.

Common mistakes

• Loading many weights and styles that the design does not use.
• Not preloading the critical font, which delays the first text render.
• Choosing a fallback with very different metrics, which causes layout shift on swap.
• Using third-party font hosts without considering extra connections and privacy rules.

Related

• Core Web Vitals
• Lazy loading
• Browser cache
• CSS

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.