Loading web fonts without hurting performance

01Why font loading matters

Web fonts are files the browser must download before it can show text in the intended style. Heavy or late fonts delay readable text, and a swap from the fallback font to the web font can move the layout. Good loading keeps text readable early and stable.

The main goals are few bytes, early requests and a stable layout. The sections below follow that order.

02Reduce what you send

• Use WOFF2. It is a compressed font format supported by all current browsers.
• Subset. Remove glyphs you do not need. Arabic fonts can be large because of many shapes and ligatures, so keep only the characters you use.
• Use unicode-range. Split a family into files, such as Latin and Arabic, and declare <code>unicode-range</code> in each <code>@font-face</code>. The browser downloads a file only when the page uses its characters.
• Limit families and weights. Each weight and style is another file. Two families with two weights each is often enough.
• Consider variable fonts. One file can cover a range of weights, which can be smaller than several static files when you need many weights.
• Self-host. Serving fonts from your own domain avoids an extra connection to a third-party server and gives you control over caching.

Check the font licence before subsetting or converting a font. Some licences restrict modification or hosting, and open-source fonts usually state clearly what is allowed.

For Arabic, keep the weights and styles used in the interface to a minimum, and test that the subset still contains the digits, punctuation and the characters used in your content.

03Control when fonts load and show

Preload the font used above the fold, usually the main text or headline font, and only that one. Preloading everything competes with other critical resources.

A font preload link needs the <code>crossorigin</code> attribute, even when the font is self-hosted.

• font-display: swap

  Shows fallback text at once, then swaps. Text is readable early, but layout may shift.

• font-display: optional

  Uses the web font only if it is ready very quickly. No late swap, but first-time visitors may see the fallback.

Neither value is right for every site. Swap suits body text where reading matters most. Optional suits cases where a late change would be more harmful than a fallback font. A third choice, <code>fallback</code>, offers a short swap window.

04Reduce layout shift

Choose a fallback font close to the web font, then adjust it with descriptors inside a fallback <code>@font-face</code>: <code>size-adjust</code>, <code>ascent-override</code> and <code>descent-override</code>. Matched metrics make the swap almost invisible, so lines wrap in the same places.

Test on a slow connection and watch the first load, not only a cached reload.

Also give headings and buttons enough room that a small change in text width does not move other elements. A fixed line height and a sensible minimum height for text blocks help with this.

05Sources

• MDN Web Docs. @font-face and font-display. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
• web.dev. Best practices for fonts. https://web.dev/articles/font-best-practices