Choosing a typeface and loading it on the page

A typeface is chosen as a design decision: this family, these weights, these sizes. The second half of the decision never gets discussed. How does that family reach the browser, what appears on screen until the file lands, and will the lines shift once the text settles? Those are loading questions rather than design ones, and their answers decide the first second a visitor sees.

How many cuts do you really need

A family having eight weights does not mean you need eight. Most sites run on three cuts: regular for body, bold for emphasis, semibold for headings.

Every extra cut means another file. A modern cut, subset to the Latin character set, arrives at somewhere between twenty and forty kilobytes; six cuts pass two hundred comfortably, and that weight gets paid again on every first visit.

Question the italic cuts too. Is there genuinely italic text on the site, or would the browser’s synthesised slant do?

Serving them yourself should be the default

Pulling a typeface from a third-party CDN adds another domain, and connecting to that domain costs the browser time. Serve the file from your own domain and that step disappears entirely.

The second gain is control. With a local file you can subset it, set the cache lifetime yourself, and know the version will not change one day.

Subsetting matters for Turkish content. When a font file also carries Cyrillic, Greek and Vietnamese glyphs its size multiplies, and none of those characters ever appear on the site.

You choose the appearance behaviour

While the file downloads, the browser reads what to do from the font-display property.

swap shows the text immediately in a fallback face and switches when the file lands. The text is readable from the first second. A jump is what you pay for it.

optional is stricter: unless the file arrives very quickly it goes unused for that load and the page stays in the fallback face. No jump occurs.

For body text swap is usually right, because readability outweighs half a second of delay.

Shrinking the jump

When the fallback and the real typeface have different letter widths, the lines shift at the moment of the switch. That shift is measured as Cumulative Layout Shift, and fixing it takes two steps.

First, preload the font file used on the first screen. The browser then starts downloading it without waiting to parse the CSS.

Second, bring the fallback’s metrics closer to the real one. A local fallback gets defined with size-adjust, ascent-override and descent-override, and the switch shrinks to something nobody sees.

The check

Open the page under a slow connection simulation. Watch the first two seconds.

If no text appears at all, the font-display setting is missing. If text appears and the lines then shift, the fallback metrics were never adjusted, meaning the second of the two steps was skipped. With neither problem, the work is finished.