Web fonts slow a site down because the browser must find, download and apply each font file before showing text in that typeface, and many sites load more font files than they use. The fix is to use fewer weights, serve WOFF2 only, set font-display, preload the one font used above the fold, and subset or self-host where it helps.
This guide explains exactly how fonts delay rendering and cause layout shift, then goes through each fix with copy-paste code.
Key takeaways
- Web fonts slow pages because the browser must find, download and apply each file before showing text in that typeface.
- For most small-business sites, two to four font files is plenty, served in WOFF2 format only.
- Set font-display, such as swap for brand fonts and optional for body text, so text is not hidden while fonts load.
- Preload only the one or two fonts used above the fold, with the crossorigin attribute, or the browser downloads them twice.
How do web fonts slow down a page?
A browser only learns it needs a font after it has downloaded the HTML, then the CSS, and found an element that uses that font. If the font comes from a third-party service, the browser may first need to download that service's stylesheet and connect to a second domain for the font files. That chain can add several round trips before text appears.
While waiting, browsers behave differently by default. Chromium and Firefox hide text for up to 3 seconds, then show a fallback; Safari has traditionally waited much longer. That blank-text period is often called a "flash of invisible text". When the font finally arrives and replaces the fallback, the text can reflow and push content around, hurting Cumulative Layout Shift, one of Google's Core Web Vitals.
How many font files is too many?
Each weight and style is a separate file: regular, italic, bold and bold italic of one family is four files. Add a second family for headings in two weights and you are at six. For most small-business sites, two to four files is plenty. Check what you actually load in Chrome DevTools: Network tab, filter Font, reload.
Simple ways to cut the number:
- Drop weights you barely use, such as light 300 or extra-bold 800.
- Let headings use the body family in bold rather than a separate family.
- Use a variable font, which packs a range of weights into one file.
- Replace icon fonts with inline SVG icons.
What does font-display do and which value should I use?
font-display in your @font-face rule tells the browser what to show while a font downloads:
| Value | Block period (text hidden) | Swap period | Best for |
|---|---|---|---|
block |
About 3 seconds | Infinite | Rarely appropriate |
swap |
Effectively none | Infinite | Brand and heading fonts that must appear |
fallback |
About 100 ms | About 3 seconds | A compromise |
optional |
About 100 ms | None | Body text where speed matters most |
swap shows text immediately in a fallback font, then swaps in the web font whenever it arrives, which can cause a visible shift. optional gives the browser a very short window; if the font is not ready, the fallback is used for that page view and the font is cached for next time. Web.dev describes optional as the best-performing option, and notes that combining strategies, such as swap for branding and optional for body text, is valid.
@font-face {
font-family: "Brand Sans";
src: url("/fonts/brand-sans-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
If you use Google Fonts, add &display=swap to the stylesheet URL.
Should I preload my web fonts?
Preload the one or two font files used in text visible on load, typically the body regular weight and perhaps a heading weight. Preloading tells the browser to fetch them immediately rather than after it has parsed the CSS.
<link rel="preload" href="/fonts/brand-sans-regular.woff2"
as="font" type="font/woff2" crossorigin>
The crossorigin attribute is required even for fonts on your own domain, because fonts are always fetched in CORS mode. Without it, the browser downloads the font twice.
Do not preload every font. Preloads compete for bandwidth with your hero image and CSS, and web.dev notes that preload ignores unicode-range, so a preloaded subset will download whether the page needs it or not.
Is it faster to self-host fonts than use Google Fonts?
Often, but not always. The old argument for shared font services was that visitors might already have the font cached from another site. That stopped being true when Chrome partitioned its HTTP cache by site in Chrome 86. A font cached on one website is no longer reused on another.
Self-hosting removes the extra connection to another domain and lets you control caching and preloading. Web.dev cautions that self-hosting is not automatically faster: you then need to handle WOFF2 conversion and subsetting yourself, which font services do for you, and you should serve the files over HTTP/2 or a CDN. Check the font licence allows self-hosting.
There is also a privacy angle. In January 2022 a German court (Munich Regional Court) awarded €100 damages against a website that passed a visitor's IP address to Google by loading Google Fonts without consent. That ruling applies in Germany, not the UK or US, but self-hosting avoids the question entirely.
What is font subsetting and does it help?
A full font file can contain hundreds or thousands of glyphs covering many languages. Subsetting strips out characters you never use. A site written in English may only need the Latin set, plus a few symbols such as £ and €.
You can subset with tools such as pyftsubset (part of the fontTools library) or online font generators, then declare which characters each file covers with unicode-range, so the browser only downloads a file when the page actually uses those characters.
@font-face {
font-family: "Brand Sans";
src: url("/fonts/brand-sans-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+20AC, U+2122;
font-display: swap;
}
Be careful: if your site has customer names or content in other languages, too aggressive a subset will show missing characters in a fallback font.
Which font format should I use?
WOFF2 only. It uses Brotli compression internally, compresses around 30% better than WOFF according to web.dev, and is supported by all current browsers. You no longer need TTF, EOT or SVG font fallbacks.
How do I stop fonts causing layout shift?
When a fallback font and a web font have different sizes, swapping them moves text. Two fixes:
- Choose a system fallback with similar proportions to your web font.
- Adjust the fallback with
size-adjust,ascent-overrideanddescent-overrideso it takes up the same space:
@font-face {
font-family: "Brand Sans Fallback";
src: local("Arial");
size-adjust: 105%;
ascent-override: 92%;
descent-override: 24%;
}
body { font-family: "Brand Sans", "Brand Sans Fallback", sans-serif; }
The percentages above are illustrative; calculate yours from your font's metrics, or use a framework or tool that generates them automatically. Our guide to fixing cumulative layout shift covers other causes.
Frequently asked questions
Should I just use system fonts?
A system font stack (the fonts already installed on the device) loads instantly and never shifts. It suits many business sites well. If your brand relies on a specific typeface, use it for headings and system fonts for body text as a compromise.
Why does PageSpeed say my fonts are render-blocking?
The third-party font stylesheet itself, such as the Google Fonts CSS, is render-blocking because it sits in the <head>. Self-hosting and inlining the @font-face rules removes that request. See our guide to render-blocking resources.
Do web fonts affect Largest Contentful Paint?
Yes, if the LCP element is text, such as a large heading, and the font hides text while loading. Using font-display: swap or optional lets the text paint straight away in a fallback.
Should I preconnect to Google Fonts?
If you keep using Google Fonts, preconnect to https://fonts.gstatic.com with the crossorigin attribute, as that is where the font files live. It saves connection time. Self-hosting removes the need altogether.
How do I find out which fonts my site loads?
Filter the Chrome DevTools Network panel by Font and reload. The MakeItFlow technology detection also shows which font services and other third-party tools a site uses.
What to do next
Count your font files today. If there are more than four, cut them, switch to WOFF2, add font-display and preload only the main body font. Re-test LCP and CLS afterwards with the MakeItFlow website speed test to confirm the improvement.
Related reading
- How to Stop Third-Party Scripts Slowing Down Your Website: Stop third-party scripts slowing your website: audit every tag, remove unused ones, defer the rest and use facades for chat widgets and video embeds.
Sources
- Best practices for fonts – web.dev
- font-display – MDN
- Gaining security and privacy by partitioning the cache – Chrome for Developers
- Improved font fallbacks – Chrome for Developers
- Munich court ruling on Google Fonts – activeMind.legal
Written by the MakeItFlow team
We build the website audit these guides are based on. Every fact is checked against the primary sources listed above and this guide was last reviewed on 31 October 2026 . How we research and check
Check your own site in 30 seconds
Run a free audit covering speed, SEO, DNS, email authentication and security headers — and get a prioritised fix list.
