Choosing Web Fonts Without Slowing Your Site

Custom fonts help a site look distinctive, but each font file must be downloaded before text can appear in its final style. Too many fonts or weights can slow your pages and cause text to flash or jump. A few careful choices keep the benefits without the cost.

Use fewer fonts and weights

Every family and every weight, such as regular, medium, and bold, is a separate file. Choose one or two families and only the weights you truly use. Dropping unused italics or extra weights can save significant data. For design guidance, see typography basics.

Consider system fonts

System font stacks use the fonts already installed on the visitor's device, so there is nothing to download. They load instantly and can look clean and modern. For some sites, a system font for body text and a custom font for headings is a good compromise.

Use WOFF2

WOFF2 is the modern web font format, with good compression and wide browser support. Prefer it over older formats.

Subset your fonts

Fonts often include characters for many languages you do not need. Subsetting removes unused glyphs to produce a smaller file. Many font services do this for you, and tools exist for self-hosting.

Control how text appears while loading

The CSS font-display property decides what happens before a custom font arrives. A value of swap shows text immediately in a fallback font, then swaps when ready. This avoids invisible text, though it can cause a slight shift. Choose a fallback font with similar proportions to reduce movement.

Preload important fonts

For fonts used above the fold, you can add a preload hint so the browser fetches them early. Use this sparingly, since preloading too much competes with other resources.

Self-host or use a service

Fonts served from a third-party service require extra connections, though they offer convenience and often good performance. Self-hosting gives you more control and removes a dependency, and it can avoid privacy concerns in some regions, so check your obligations. See privacy policy and cookie banner basics. Whichever you choose, measure the effect.

Mind layout shift

Font swapping can change text dimensions and move content, which contributes to Cumulative Layout Shift. Matching fallback metrics and limiting the number of fonts reduce this.

Test on slow connections

Throttle your connection in browser developer tools and watch how the page loads. See how to test website speed.

Keep readability first

Do not sacrifice legibility or accessibility for novelty.

The bottom line

Use few fonts, modern formats, sensible loading behavior, and a good fallback. Your typography can look great and still be fast.