Web fonts

A stylesheet declares a web font with the rule @font-face, and the browser downloads the file as soon as text on the page needs it. The format made for this purpose is WOFF2WOFF2The W3C font format for the web. It compresses font data with Brotli, so a WOFF2 file is considerably smaller than the same font as TTF or OTF.In the glossary, a W3C Recommendation that packs font data with Brotli; according to web.dev it compresses up to 30 percent better than its predecessor WOFF. A classic font family needs a separate file for each weight and style. A variable fontVariable fontA font file that contains a continuous range of styles, for example every weight from thin to black, instead of one file per style. A page with several weights then loads one file.In the glossary holds a continuous range of weights, and often widths, in a single file. A subsetSubsetA font file reduced to the characters a website actually uses, for example only Latin letters. Removing unused alphabets and symbols makes the file noticeably smaller.In the glossary leaves out the characters a site never uses, such as Cyrillic or Greek letters on a site written in German and English.

The median mobile home page loaded 122 KB of fonts in 2025 (Web Almanac), more than five times the size of its HTML. A font also decides when text becomes readable. Until the file arrives, the browser either hides the text or shows it in a fallback font and swaps it later. With the setting font-display: block, Chromium and Firefox hide text for up to three seconds. With swap, text appears at once in the fallback, but the change of font can shift the layout once the web font arrives, which worsens the CLSCLSCumulative Layout Shift: how much visible content moves unexpectedly while a page loads and is used. Google rates a score of 0.1 or less as good.In the glossary score.

Practice has caught up only partly. In 2025 WOFF2 accounted for about 65 percent of font file requests, 41 percent of mobile websites used at least one variable font, and about half of all pages used font-display: swap.

Fewer files are the first lever, since a single variable font can replace several static files. Subsetting and WOFF2 then reduce each remaining file further. A preloadPreloadAn instruction in the HTML (`<link rel="preload">`) that tells the browser to fetch a file early because the page will need it soon, typically a font or the main image.In the glossary hint tells the browser to request the font early instead of waiting until it has read the stylesheet. It requires the attribute crossorigin even for fonts on the site's own server, and in 2025 only about 12 percent of pages preloaded at least one font. Preloading too many files takes bandwidth from content that matters more, so it suits only the fonts needed for the first screen.

The fallback font deserves attention as well. The closer its proportions match the web font, the less the text moves at the swap. Finally, a font needs a licence that covers web use, which a desktop licence does not always include.