The Font Tax

Every custom font you add comes with a cost. That cost is render-blocking time — the period where your browser has downloaded the HTML and CSS but can't paint text because it's still waiting for the font file.

On a typical page with 3–4 custom fonts, this adds 500ms to 1.5 seconds to perceived load time.

Understand font-display

The font-display CSS property controls what the browser does while waiting for your font to load:

• swap: Shows fallback font immediately, swaps when custom font loads. Best for most sites.

• fallback: Short block period, then swap. Good balance.

• optional: Use font only if already cached. Best performance, least consistency.

Preload Your Primary Font

Tell the browser to fetch your most important font file early — before it discovers it in the CSS. This alone can recover 300–600ms on first load.

Use Variable Fonts

A variable font file contains the entire weight and style range in a single file. Instead of loading Regular, Medium, SemiBold, and Bold as four separate files, you load one. File size is typically 30–40% smaller than loading four static weights.

Subset Your Fonts

If your site is English-only, you don't need Cyrillic or Greek character sets. Subsetting strips unused characters from the font file, sometimes cutting file size by 50–70%.

Match Your Fallback Font

The jarring swap between your system font and your custom font is caused by metrics differences. Use CSS size-adjust, ascent-override, and descent-override on your fallback font to minimize the visual shift.

Fast fonts are possible. It just takes a few deliberate choices.