Web Font Optimisation: How to Load Fonts Without Slowing Your Site

Custom fonts add personality to a website but frequently hurt performance. Here is how to load them efficiently and avoid common pitfalls.

Why fonts hurt performance

Custom fonts require a browser to make a network request, wait for the file to download, and then apply the font to the page. If the font has not loaded by the time the browser wants to render text, it either shows nothing (FOIT — Flash of Invisible Text) or falls back to a system font (FOUT — Flash of Unstyled Text).

On a slow connection, each font file adds 100–400ms of blocking time. A site using five font weights can easily add 1–2 seconds to its load time from fonts alone.

Step 1: Reduce the number of font variants

Every font weight (400, 600, 700) and every style (italic) is a separate file. A site that imports:

```html

```

is downloading four font files. Most sites only use two or three weights visually — audit your CSS and remove any that are not actively used.

Step 2: Self-host your fonts

Loading fonts from Google Fonts or Adobe Fonts adds DNS lookups and connection overhead to an external server. Self-hosting eliminates this.

Use Google Fonts Helper (fontsource.io) to download WOFF2 files and host them on your own server. Then reference them in CSS with @font-face.

```css

@font-face {

font-family: 'Inter';

font-style: normal;

font-weight: 400;

font-display: swap;

src: url('/fonts/inter-400.woff2') format('woff2');

}

```

Step 3: Use font-display: swap

The font-display: swap descriptor tells the browser to render text immediately in a fallback font and swap to the custom font when it loads. This eliminates invisible text and improves Largest Contentful Paint.

Step 4: Preload critical fonts

If you have identified the one or two font files that affect above-the-fold text, preload them in the document :

```html

```

This tells the browser to download the font at the highest priority, before it encounters the @font-face rule in CSS.

Step 5: Consider system fonts

System font stacks — using fonts already installed on the visitor's device — add zero loading time. For utility interfaces, dashboards, or sites where typography is not a brand differentiator, this is the fastest option:

```css

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

```

Measuring font impact

Run a Loadzen check before and after optimising fonts. Look specifically at FCP and LCP — font optimisation has the most direct impact on these two metrics.