Custom web fonts make websites look professional and on-brand. They also add HTTP requests, additional DNS lookups, and kilobytes of data that must be downloaded before your page renders correctly. Done carelessly, fonts are a significant drag on page performance.
The good news: with a few targeted changes, you can have both attractive typography and fast load times.
Why Fonts Can Slow Your Site
When a browser loads a page, it encounters font references in your CSS and needs to fetch those font files. Until the fonts arrive, the browser faces a choice: show the text in a fallback system font (causing a flash when the web font loads), or hide the text entirely until the font is ready.
FOIT (Flash of Invisible Text) happens when the browser waits for the font to load before rendering text. Users see a blank page or missing text for a moment. This is particularly bad for perceived performance.
FOUT (Flash of Unstyled Text) happens when the browser shows text in a fallback font first, then swaps to the web font when it loads. The layout may shift when the swap happens, which affects Core Web Vitals scores (specifically Cumulative Layout Shift, or CLS).
Third-party DNS lookups are another cost. Loading fonts from Google Fonts means your browser has to resolve fonts.googleapis.com and fonts.gstatic.com - DNS lookups that add latency before the font request even starts.
The Problem with Google Fonts (and the Fix)
Google Fonts is the most common way websites load custom fonts, and it is not inherently bad - but it is easy to use carelessly.
Loading five fonts, each in four weights, from Google Fonts means twenty separate font file requests, two DNS lookups to Google domains, and potentially hundreds of kilobytes of font data. That adds up.
Preconnect to Google Fonts domains. If you are using Google Fonts, add preconnect hints in your <head> to reduce the DNS and connection overhead:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
This tells the browser to establish connections to these domains early, before it encounters the actual font request in your CSS.
Use font-display: swap. Add this to your Google Fonts URL or your @font-face declarations. It tells the browser to show fallback text immediately and swap to the web font when it loads - eliminating FOIT and reducing perceived load time:
@font-face {
font-family: 'YourFont';
src: url('yourfont.woff2') format('woff2');
font-display: swap;
}
Google Fonts supports this via the display=swap parameter in the embed URL.
Self-Hosting Fonts for Maximum Performance
The biggest performance gain comes from serving fonts from your own domain. When fonts are self-hosted, there are no third-party DNS lookups, no cross-origin requests, and the fonts can be cached alongside your other assets.
Tools like google-webfonts-helper (gwfh.mranftl.com) let you download Google Fonts files directly, including the modern .woff2 format. Once downloaded, upload the font files to your server and add @font-face declarations to your CSS.
Self-hosting also means your fonts load even if Google's servers are slow or unavailable, and it eliminates any privacy concerns about visitor data being sent to Google on font requests (relevant for GDPR and Canadian privacy compliance).
Reduce Font Weights and Variants
Every weight you load is an additional font file. If you load Regular, Italic, Medium, Bold, and Bold Italic - that is five files per font, plus more if you need character sets beyond Latin.
Audit what you actually use. Most websites can get by with two weights: regular (400) and bold (700). If your design calls for more, question whether the typographic refinement is worth the performance cost.
Also consider unicode-range subsetting - loading only the character ranges your language actually uses rather than full international character sets. Most font delivery services handle this automatically, but it is worth knowing it exists.
Impact on Core Web Vitals
Font loading directly affects two Core Web Vitals metrics:
Largest Contentful Paint (LCP): If your hero section has large headline text rendered in a web font, the LCP element may not paint until that font is loaded. Preloading your primary font file addresses this.
Cumulative Layout Shift (CLS): FOUT causes layout shifts when the fallback font and web font have different metrics (line height, spacing, character width). CSS size-adjust, ascent-override, and line-gap-override properties can be used to match fallback font metrics to the web font and reduce visible shift.
The Practical Recommendation
For most WordPress sites: install the OMGF (Optimize My Google Fonts) plugin, which automatically downloads your Google Fonts to your server and serves them locally. Combined with font-display: swap and a limit of two font weights per typeface, you will eliminate font-related performance issues without giving up custom typography.
Fast hosting makes font optimisation even more effective. dotCanada's LiteSpeed-powered plans reduce time to first byte, meaning your fonts arrive sooner regardless of where they are hosted.
