When the largest visible element on a page is a headline or block of text, the font used to render it becomes part of the LCP equation. A custom font that loads slowly — or blocks rendering entirely — can quietly sabotage an otherwise fast page.
Key takeaways:
- Text can be an LCP element, meaning font loading directly affects the score
font-display: swapprevents fonts from blocking text from appearing- Preloading critical font files reduces the delay before custom fonts render
- Limiting font weights and styles reduces total download size
- System fonts avoid the issue entirely, at the cost of less brand customization
How Fonts Can Delay LCP
By default, some browsers hide text until a custom web font finishes downloading — a behavior sometimes called "flash of invisible text." If that hidden text is your largest visible element, LCP doesn't register until the font arrives, even though the text content itself was ready much earlier.
Font Loading Strategies Compared
| Strategy | Behavior | Effect on LCP |
|---|---|---|
Default (font-display: auto) | Browser decides, often blocks text render | Can delay LCP significantly |
font-display: swap | Shows fallback font immediately, swaps when custom font loads | Text becomes LCP element sooner |
font-display: optional | Uses fallback if custom font isn't ready quickly | Fastest, but custom font may not load at all on slow connections |
| Preloading font files | Browser fetches font earlier in the loading process | Reduces delay before swap happens |
| System fonts only | No custom font download needed | Eliminates the issue, less brand distinctiveness |
Practical Steps to Implement
- Add
font-display: swapto your@font-facedeclarations so text renders immediately with a fallback font, then swaps once the custom font loads. - Preload your most critical font file (typically the one used in headlines) using
<link rel="preload" as="font">so the browser prioritizes fetching it. - Limit the number of font weights and styles loaded — each additional weight is a separate file to download.
- Consider variable fonts, which can combine multiple weights into a single, often smaller, file.
When to Consider System Fonts
For some businesses, particularly those where speed matters more than font-based branding, using a well-supported system font stack removes font loading from the LCP equation entirely. This is a reasonable trade-off for internal tools, documentation sites, or performance-critical landing pages, even if it's not the right choice for every brand.
Frequently Asked Questions
Does font-display: swap cause visible layout shift?
It can, if the fallback and custom fonts have very different sizing — this is a trade-off with Cumulative Layout Shift (CLS) worth testing, and can often be minimized by choosing a fallback font with similar metrics.
How many font files should I preload?
Generally just one or two of the most critical ones — preloading too many fonts competes for bandwidth with other critical resources like your LCP image.
Are Google Fonts slower than self-hosted fonts?
Not necessarily, but self-hosting removes an extra DNS lookup and connection to a third-party domain, which can shave off meaningful time on some sites.
Next Steps for Your Business
Check whether your site's headline or hero text is your LCP element using PageSpeed Insights, then confirm your font loading strategy includes font-display: swap and preloading for critical fonts.
Our team can review and optimize your font loading setup as part of a broader performance audit.