How to Choose Web Fonts Without Slowing Down Your Website

Typography is one of the most powerful design tools available to web designers. The right typeface communicates personality, establishes hierarchy, and makes content more readable. But web fonts — fonts loaded from an external source rather than available on the user's device — have a real performance cost that is easy to underestimate.

A poorly configured web font setup can delay when text appears on screen, cause layout shifts as fallback fonts are replaced, and add hundreds of kilobytes to every page load. Getting fonts right requires balancing aesthetic goals with performance constraints — and with a thoughtful approach, you can have excellent typography without sacrificing speed.

Choosing Fonts With Performance in Mind

Every typeface you choose comes at a cost. Each weight and style — regular, bold, italic, bold italic — is a separate font file that must be downloaded. A site that loads six font files (two typefaces, three weights each) is loading significantly more data than one using a single well-chosen typeface. Ask whether you genuinely need each weight and style, or whether your design could be refined to use fewer.

Variable fonts are a modern alternative that encode multiple weights and styles in a single file. A variable font file is larger than a single-weight file, but smaller than three or four separate weight files combined. If you are using more than two or three weights of a typeface, a variable font is almost certainly more efficient. Google Fonts offers variable versions of many popular typefaces.

Loading Fonts Efficiently

Self-hosting fonts is generally faster and more reliable than loading from Google Fonts or other third-party providers. Third-party font services require an additional DNS lookup, TCP connection, and TLS handshake — adding latency before the font can even begin downloading. Self-hosting eliminates this and gives you full control over cache headers.

If you use Google Fonts or another provider, add a preconnect link tag for the font domain in your HTML head: <link rel="preconnect" href="https://fonts.googleapis.com">. Pair this with a preload for your most critical font file to begin downloading it as early as possible. Use the font-display: swap property in your @font-face declarations so text is immediately visible in a fallback font while the web font loads.

Reducing Layout Shift Caused by Fonts

When a web font replaces a fallback system font, text reflows if the two fonts have different metrics — different character widths, line heights, or letter spacing. This reflow is measured as Cumulative Layout Shift and can cause a poor Core Web Vitals score. At Xpose in Norwich, font-related layout shift is one of the most common issues we find when auditing clients' sites for performance.

The CSS size-adjust, ascent-override, descent-override, and line-gap-override descriptors let you adjust the fallback font's metrics to match the web font as closely as possible, minimising the visual shift when the web font loads. Tools like Fontaine (an npm package) or the Font Style Matcher can automate the calculation of these overrides. With carefully matched fallback metrics and font-display: optional, many sites can eliminate font-related layout shift entirely.