Fonts without regret

Why this matters

Fonts affect page weight, render speed, and layout shift [1]Source 1 . If fonts load late or swap badly, your page feels slow and unstable [3]Source 3 .

The goal is simple. Text appears quickly [2]Source 2 . Text stays stable [3]Source 3 . Text stays readable.

The most common font problems

• Too many weights and styles, which adds unnecessary file size.
• Multiple font families used for small differences, which adds more requests and more loading time [2]Source 2 .
• Late font loading, which causes text to jump when the font swaps [3]Source 3 .
• Fonts applied across the whole site when only headings need them.
• Decorative fonts used for body text, which reduces readability on mobile.

Font choices that keep sites fast

Keep the number of families low

• Use one primary family for body text.
• Add a second family for headings only if it earns its place.
• Avoid multiple decorative families for visual flavour.

Keep the number of weights low

• Aim for two weights for body text, regular and bold.
• Add one heading weight if needed.
• Avoid loading italic unless it appears across the site.

Use variable fonts when it helps

Variable fonts often reduce downloads when they replace many separate files. They also get heavy when you load wide axis ranges without a plan [2]Source 2 .

• Use a variable font to replace multiple files, not to add new complexity.
• Limit the axes you rely on. Prioritise weight.
• Keep usage consistent, so you do not end up with endless in-between weights.

Loading rules that prevent layout shift

Pick sensible fallbacks

A good fallback reduces the visible jump between default text and the final font [3]Source 3 .

• Choose a system fallback with similar proportions.
• Avoid fallbacks that are significantly wider or taller than the final font.
• Test headings, buttons, and form labels, not only body text.

Make font swapping predictable

• Avoid invisible text during load [2]Source 2 .
• Keep the first render readable.
• Prevent large jumps in line breaks and spacing [3]Source 3 .

Practical checks you can run

• Load the page on a mobile connection and watch the first render. Text should appear quickly [2]Source 2 .
• Reload the page and watch headings. They should not shift position after load [3]Source 3 .
• Check the total font file size downloaded on a typical page.
• Check how many font files load for one page view, not across the whole site.

A simple font policy for small teams

• One primary body font family.
• Two body weights, regular and bold.
• One heading family only if needed.
• No italics unless used across templates.
• Fonts applied only where they are needed.

Next step

If your site feels unstable while loading, review fonts alongside images and banners [3]Source 3 . Reducing font files and improving fallbacks often removes layout shift and improves perceived speed [4]Source 4 .