Font Loading Performance: How It Affects Page Speed

Custom fonts make a site look distinctive, but each one is a file the browser has to download before it can show text in that font. Handled badly, fonts delay the main content, make text flash or jump, and add weight to every page.

How fonts slow a page

• Invisible text: by default, browsers may hide text for a short time while the font downloads.
• Layout shift: text first appears in a fallback font, then jumps when the web font arrives and takes up a different amount of space. This counts against Cumulative Layout Shift (CLS).
• Slower main content: if the biggest text on screen waits for a font, Largest Contentful Paint (LCP) is later.
• Extra requests: every weight and style is a separate file, and fonts from another server need an extra connection.

The fixes

1. Use WOFF2. It's the smallest common format and every current browser supports it.
2. Load fewer files. Two weights are often enough. A variable font can replace several weights with one file.
3. Subset fonts to the characters you use, such as Latin only.
4. Set font-display. swap shows text right away in a fallback font; optional uses the web font only if it arrives quickly, which avoids layout jumps.
5. Preload the most important font with <link rel="preload" as="font" type="font/woff2" crossorigin>, usually the one for headings or body text above the fold.
6. Match the fallback. The size-adjust and ascent-override settings in @font-face make the fallback font take up the same space, so the swap doesn't move anything.

Self-hosting vs font services

Browsers used to share cached fonts between sites, so a popular font from Google Fonts might already be on a visitor's computer. Chrome stopped this in 2020, keeping each site's cache separate for privacy. Self-hosting fonts on your own domain now often loads faster, since it avoids connecting to another server, and gives you control over caching. Check the font's license first. See web font licensing.

Or skip web fonts

A system font stack uses the fonts already on each device, with no download at all. See system fonts vs web fonts.

How to measure

• Run Lighthouse in Chrome DevTools and look at LCP, CLS and font warnings.
• In the Network panel, filter by Font to see each file, its size and when it loads.
• Font Detector shows the font family a site asks for on any text you click. It reports the first font in the list, not the fallback, so check the Network panel to see which files actually load.

Want someone to look at your site's speed and design? Get a free website audit.