Font Loading Metrics: Core Web Vitals Guide
Understand how fonts impact Core Web Vitals metrics including LCP, FCP, and CLS. Learn to measure, monitor, and optimize font performance for better user experience and SEO rankings.
Key Takeaways
- • Fonts directly impact LCP when text is the largest contentful element
- • Unoptimized fonts can delay FCP by 500ms-2s on slower connections
- • Font swapping without size-adjust causes layout shifts (CLS)
- • Target font budget: 100-200KB total for optimal performance
In this article
Web fonts are among the most impactful resources for page performance. They affect how quickly users see content, whether text is readable during load, and if the page layout remains stable. Understanding font loading metrics is essential for delivering fast, polished web experiences that rank well in search engines.
Google's Core Web Vitals—Largest Contentful Paint (LCP), First Contentful Paint (FCP), and Cumulative Layout Shift (CLS)—are directly influenced by font loading behavior. Poor font performance can tank your LCP score if text is your largest element, cause blank text periods that frustrate users, and create jarring layout shifts when fonts swap in.
This guide covers each Core Web Vital, how fonts affect it, and specific measurement techniques to identify and fix font performance issues.
Largest Contentful Paint (LCP) and Fonts
LCP measures when the largest visible content element finishes rendering. For many pages, this is a text block or heading—which means font loading directly affects your LCP score.
How Fonts Impact LCP
Render Blocking
Browsers wait for fonts before rendering text, delaying LCP until fonts load
Network Latency
Large font files on slow connections significantly delay text rendering
FOIT (Flash of Invisible Text)
Default browser behavior hides text until font loads, pushing LCP later
Good LCP for Fonts
< 2.5s
Font loads and renders before 2.5 seconds
Poor LCP for Fonts
> 4.0s
Slow fonts pushing LCP beyond 4 seconds
LCP Optimization Tips
- • Preload critical fonts used in LCP element
- • Use font-display: swap to show fallback immediately
- • Subset fonts to reduce file size
- • Self-host fonts to eliminate third-party DNS lookup
First Contentful Paint (FCP) and Fonts
FCP measures when the first piece of DOM content renders. If your first visible content uses custom fonts and the browser waits for them, FCP is delayed.
FCP Timeline with Fonts
Timeline without font-display: swap ├─ 0ms: HTML arrives ├─ 50ms: CSS parsed, font request starts ├─ 100ms: DOM ready, but text hidden (FOIT) ├─ 800ms: Font downloaded └─ 820ms: FCP - Text finally visible Timeline with font-display: swap ├─ 0ms: HTML arrives ├─ 50ms: CSS parsed, font request starts ├─ 100ms: FCP - Fallback font renders immediately └─ 800ms: Custom font swaps in
Good FCP
< 1.8s
Needs Improvement
1.8s - 3.0s
Poor FCP
> 3.0s
Cumulative Layout Shift (CLS) and Fonts
CLS measures visual stability—how much the page layout shifts during loading. Font swapping is a major cause of CLS when fallback and custom fonts have different metrics.
How Font Swapping Causes CLS
When a fallback font renders first, then swaps to the custom font, text often reflows because the fonts have different widths, heights, and line heights. This causes surrounding elements to shift position.
Without size-adjust
Arial 16px → Custom Font 16px = Different actual size, causes shift
With size-adjust
Fallback adjusted to match custom font metrics = No shift
/* Prevent CLS with size-adjust */
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap;
}
@font-face {
font-family: 'CustomFont-Fallback';
src: local('Arial');
size-adjust: 105%;
ascent-override: 95%;
descent-override: 22%;
line-gap-override: 0%;
}CLS Target
Keep CLS below 0.1 for a "Good" score. Font-related shifts often contribute 0.05-0.2 to CLS without proper fallback matching.
Measuring Font Performance
Chrome DevTools
The Performance panel shows exactly when fonts load and render. Look for:
- Network waterfall: Font file timing and size
- Main thread: Font rendering events
- Experience section: Layout shifts flagged
- LCP marker: Whether fonts affected LCP timing
Lighthouse
Run Lighthouse audits to get font-specific recommendations:
- "Ensure text remains visible during webfont load"
- "Preload key requests" (flags critical fonts)
- "Avoid enormous network payloads" (large font files)
- "Reduce unused CSS" (unused font-face declarations)
Web Vitals JavaScript Library
Monitor real user metrics in production:
import {onLCP, onFCP, onCLS} from 'web-vitals';
onLCP(metric => {
// Check if LCP element uses custom fonts
console.log('LCP:', metric.value);
});
onCLS(metric => {
// Identify font-related layout shifts
console.log('CLS:', metric.value);
});Font Loading API
Programmatically track font load timing:
const start = performance.now();
document.fonts.ready.then(() => {
const loadTime = performance.now() - start;
console.log(`Fonts loaded in ${loadTime}ms`);
});
// Or track specific fonts
document.fonts.load('1em CustomFont').then(() => {
console.log('CustomFont loaded');
});Font Performance Budget
Setting a font performance budget helps prevent font bloat over time. Here are recommended targets:
File Size Budget
- Single font weight15-50KB
- Font family (4 weights)60-150KB
- Total fonts on page100-200KB
- Critical path fonts<50KB
Timing Budget
- Font load start<100ms
- Critical font loaded<500ms
- All fonts loaded<1.5s
- Font-related LCP impact<200ms
Additional Resources
Optimize Your Font Performance
Use our tools to analyze and optimize your font files for better Core Web Vitals scores.
Try Font Size Calculator
Written & Verified by
Sarah Mitchell
Product Designer, Font Specialist
Font Loading Metrics FAQs
Common questions about Core Web Vitals and font performance