Quick answer: Web fonts affect page speed because the browser has to discover, download and apply font files before it can show text in your chosen typeface. To protect web fonts page speed, use fewer families and weights, serve WOFF2 files, add font-display: swap or optional so text appears immediately, preload the one or two fonts used above the fold, subset fonts to the characters you need, and consider self-hosting. Pick fallback fonts with similar proportions to reduce layout shift when the web font arrives.
Why fonts slow pages down
When a browser loads a page that uses a custom font, a few things happen in sequence:
- It downloads the HTML.
- It finds the stylesheet that declares the font, often on another domain like Google Fonts.
- It downloads and reads that CSS.
- It notices which text needs the font while building the page.
- Only then does it request the font file itself.
That chain means font files are discovered late. Meanwhile, browsers handle the waiting in different ways. By default, many hide text for up to three seconds while the font loads, known as a flash of invisible text. Others show a fallback font first and swap when the web font arrives, a flash of unstyled text.
On a fast connection this may be barely noticeable. On a slow mobile connection, visitors can stare at a page with images and buttons but no words. Our guide to mobile page speed covers why mobile conditions magnify problems like this.
How fonts affect Core Web Vitals
Google’s Core Web Vitals, introduced in 2020, measure loading, interactivity and visual stability. Google has said these will become part of its ranking signals in May 2021 as part of the page experience update. Fonts affect two of them:
- Largest Contentful Paint (LCP): If your largest element is a heading or block of text, invisible text while the font loads can delay LCP.
- Cumulative Layout Shift (CLS): When a fallback font is swapped for a web font with different proportions, text reflows. Lines get longer or shorter, and content below jumps. That counts as layout shift.
The goal is to show text quickly and keep the swap as stable as possible.
Step 1: Use fewer fonts
The simplest fix is loading less. Every family, weight and style is a separate file. A design using two families in regular, italic, bold and bold italic can easily mean eight font files.
Review what your design actually uses:
- Can headings and body share one family?
- Do you need light, regular, medium, semibold and bold, or will regular and bold do?
- Is italic used enough to justify its own file, or can the browser synthesize it for occasional use?
Variable fonts can help. A single variable font file contains a range of weights and sometimes widths, which can replace several static files if you use many weights. If you only need two weights, static files may still be smaller.
Our article on web typography covers choosing type that reads well without excess.
Step 2: Serve WOFF2
WOFF2 is the most compressed web font format and is supported by all modern browsers. If you self-host, serve WOFF2 first. You can keep WOFF as a fallback for older browsers, but older formats like TTF, EOT and SVG fonts are rarely needed now unless you still support very old versions of Internet Explorer.
Step 3: Control how text appears with font-display
The font-display descriptor in your @font-face rule tells the browser what to do while the font loads:
- swap: Show fallback text immediately, swap to the web font whenever it arrives. Good for brand fonts where you want the web font to appear eventually.
- optional: Show fallback text immediately and use the web font only if it arrives very quickly; otherwise keep the fallback for that page view. Excellent for speed and stability, at the cost of some visitors not seeing the web font on their first visit.
- fallback: A middle ground with a short invisible period and a limited swap window.
- block: Hide text for a while. Avoid it for body text.
@font-face {
font-family: 'Brand Sans';
src: url('/fonts/brand-sans.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
If you use Google Fonts, add &display=swap to the stylesheet URL. The current Google Fonts API includes it in the default embed code.
Step 4: Preload critical fonts
Preloading tells the browser to fetch a font early, before it would normally discover it:
<link rel="preload" href="/fonts/brand-sans.woff2" as="font" type="font/woff2" crossorigin>
Preload only the one or two fonts used in the visible part of the page, typically the body text and main heading weight. Preloading everything competes with other important resources and can make things slower. The crossorigin attribute is required for fonts, even on your own domain.
If fonts come from another domain, add preconnect to start the connection early:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Step 5: Subset fonts
Many font files include characters for dozens of languages, plus symbols you never use. Subsetting removes characters you do not need. A site written only in English might need just Latin characters, which can cut file size considerably.
Google Fonts subsets automatically and uses unicode-range so browsers download only the subsets a page needs. If you self-host, tools like glyphhanger or online font generators can create subsets. Make sure to keep characters you need for names, currencies and punctuation.
Step 6: Consider self-hosting
Google Fonts is convenient and fast, but self-hosting has gained appeal:
- Fewer connections: Fonts come from your own domain or CDN, avoiding extra DNS lookups and connections.
- Cache partitioning: Browsers, including Chrome since version 86 in October 2020, now partition their HTTP cache by site for privacy. A font cached on one site is no longer reused on another, which removes one of the long-standing arguments for shared font CDNs.
- Control: You decide the caching headers, the subset and the file versions.
- Privacy: Fewer third-party requests, which some privacy policies and regulators care about.
Self-hosting means you handle updates and licensing yourself. Check the font license allows it. Fonts from Google Fonts are open source and can be self-hosted.
Step 7: Match fallback fonts to reduce layout shift
When text first appears in a fallback font and then switches, the difference in letter width and line height causes reflow. Reduce it by choosing a fallback with similar proportions. For a geometric sans serif web font, a system font like Arial or Helvetica may be close. Tools such as Font Style Matcher let you compare a web font with a fallback and adjust letter spacing and line height on the fallback to narrow the gap.
Using font-display: optional also avoids late swaps, because the browser either uses the web font almost immediately or not at all for that view.
Consider system fonts
The fastest font is one already on the device. A system font stack uses each operating system’s native interface font:
body {
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
Many well-known sites use system fonts for body text and keep a web font for headings or the logo. It is a reasonable compromise between brand and speed.
Icon fonts
Icon fonts carry the same loading issues, plus accessibility drawbacks. If icons show as empty boxes while loading, or the font is large because it contains hundreds of icons you never use, consider inline SVG instead. Our article on icon fonts and performance explains the switch.
Measuring the impact
Run PageSpeed Insights before and after changes. Relevant audits include “Ensure text remains visible during webfont load,” “Preload key requests” and layout shift details. In Chrome DevTools, filter the Network tab by Font to see how many font files load, their sizes and when they start.
Test on a throttled mobile connection, not only on your office broadband.
FAQ
Is Google Fonts bad for performance?
Not necessarily. With display=swap, preconnect and a limited number of weights, it performs well. Self-hosting can be faster because it avoids extra connections and cache partitioning removes most cross-site cache benefits.
Should I preload all my fonts?
No. Preload only the fonts needed for visible text when the page first loads.
Will font-display: swap cause layout shift?
It can, if the fallback looks very different. Choose a similar fallback or use optional to limit it.
Are variable fonts always smaller?
Not always. They save space when you use several weights. For one or two weights, static files may be lighter.
Next step
List every font file your homepage loads, cut what you do not need, add font-display and preload the essentials. Then retest.
If you would like help making your site faster without losing its look, see our Turn visitors into customers services.
