Web Font
Definition
Before web fonts a page could only use faces already installed on the reader's machine, which meant a short list — Arial, Georgia, Times, Verdana. The @font-face rule changed that: it names a family, points at a font file, and declares the weight and style that file provides. Each weight and each italic is a separate file, so a design using regular, bold and bold italic is three downloads, not one. Modern variable fonts collapse that into a single file with a continuous weight axis, typically 30 to 50 per cent smaller than the static set it replaces. The format to serve is WOFF2, supported by every browser since roughly 2016; older WOFF and bare TTF files are now only worth shipping for genuinely ancient targets.
Why It Matters
Fonts sit on the path to visible text, so their weight is paid at the worst possible moment. A page requesting four full character sets at around 120 KB each adds nearly half a megabyte before a single word can render in the intended face. What the reader sees in the meantime depends on one CSS line: font-display: swap shows the fallback face immediately and swaps when the font arrives, while the default behaviour hides the text for up to three seconds first — a blank page where the content should be. Subsetting cuts the cost sharply: a Latin-only subset of a face that also carries Cyrillic and Greek is routinely a quarter of the size.
How It Works
The browser parses the CSS, finds the @font-face rule, and downloads nothing until it knows an element on the page actually uses the family. When it does fetch, a rule catches people out: fonts are always requested in CORS mode, so a font from another origin without Access-Control-Allow-Origin arrives, is discarded, and the text silently falls back — which is also why a preload link for a font needs the crossorigin attribute. Preloading is the other lever: a link with rel=preload and as=font in the head starts the download during the initial parse rather than after the CSS is read, typically saving 200 to 400 milliseconds on the first paint of styled text. Serving fonts from the same origin as the page removes the CORS question, a DNS lookup and a TLS handshake at once.
Real-World Example
A studio publishes a one-page site at studio-mkr.99helpers.site and puts its two WOFF2 files, 34 KB and 36 KB after Latin subsetting, in a fonts folder beside index.html. Because the fonts come from the same address as the page, there is no cross-origin header to configure and no third-party connection to wait for. With font-display: swap set, the headline is legible in the fallback face at about 0.4 seconds and settles into the real face shortly after, rather than staying blank. The same site loading both faces unsubsetted from an external provider measured 1.3 seconds slower on a throttled mobile connection.
Common Mistakes
- ✕Loading every weight a family offers when the design uses three — each unused file is a download the reader pays for and never sees
- ✕Leaving font-display at its default — the text stays invisible for up to three seconds while the file downloads, which reads as a broken page
- ✕Serving fonts from another origin without Access-Control-Allow-Origin — the file arrives, the browser refuses it on CORS grounds, and the fallback face appears with no obvious cause
- ✕Shipping the full Unicode range of a face for an English-language site — Cyrillic, Greek and Vietnamese ranges can be most of the file
Related Terms
WOFF2
WOFF2 is the font format the web uses: a TrueType or OpenType font wrapped in a Brotli-compressed container built for delivery over HTTP. It is the only font format a modern site needs to serve.
Page Speed
Page speed is how quickly a page becomes useful to the person who opened it — not one number, but a set of measurements covering when content appears and when the page responds to input.
CORS
Cross-Origin Resource Sharing is a set of HTTP headers that lets a server say which other origins are allowed to read its responses from JavaScript. Without those headers the browser fetches the file but refuses to hand the contents to the calling script.
Web Asset
A web asset is any supporting file a page pulls in once the HTML has arrived — stylesheets, scripts, images, fonts, icons, videos. The HTML is the page; the assets are everything it asks for next.
Largest Contentful Paint
Largest Contentful Paint, or LCP, marks the moment the biggest visible element in the viewport has finished rendering. It is the closest single number to the question a visitor actually asks: when did this page look like it had loaded?
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →