Cutting High LCP Pages by 45% Through Font Optimization

Font Fallback Optimization to Reduce Layout Shift and Improve LCP

Context

On a high-traffic media platform, we use Futura PT as the primary UI font. During page load, users often saw a noticeable “font swap” (FOUT/FOIT-like effect) because fallback fonts (Arial/Helvetica) have very different font metrics compared to Futura PT. That caused visible text jumps and degraded perceived quality — and it also contributed to poorer Core Web Vitals.

Problem

• Text visibly “jumps” when Futura PT loads and replaces fallback fonts.
• The mismatch in font sizing/metrics makes the swap feel harsh and distracting.
• This can negatively affect perceived performance and likely impacts CLS, while also correlating with higher LCP in real pages.

Goal

Reduce visual font shifting during load and improve performance metrics, especially LCP (and potentially CLS), without changing the brand font.

What I changed

I implemented metric-compatible fallbacks using CSS @font-face overrides with size-adjust, making Arial and Helvetica render closer to Futura PT while Futura loads (and also look better if Futura fails to load).

Key idea: normalize fallback font sizing to match Futura’s perceived size.

Implementation (placed as high as possible in CSS so it applies early)

-

@font-face {
  font-family: 'Arial';
  src: local(Arial Bold);
  size-adjust: 93.5%;
  font-weight: bold;
}
@font-face {
font-family: 'Arial';
src: local(Arial);
size-adjust: 85%;
font-weight: normal;
}

Why this works

Because Futura PT’s font sizes and metrics differ significantly from Arial/Helvetica, the browser initially lays out content with fallback fonts, then reflows when Futura loads — creating the “jump.”

size-adjust reduces that mismatch so:

• The fallback font occupies almost the same visual space as Futura PT.
• The swap becomes smoother and less noticeable.
• If the main font fails to load, the fallback typography still looks closer to the intended design.

(Reference concept: CSS size-adjust for font metric alignment.)

Result / Impact

We saw a significant improvement in LCP distribution across the site:

• Pages with high LCP decreased from 7,061 to 3,831
• Measurement dates: 18.02.25 → 03.03.25

This change improved perceived stability (less “jumping” typography) and reduced the number of pages flagged with poor LCP performance.

Takeaways

• Font optimization isn’t only visual polish — it can produce measurable performance wins.
• Aligning fallback fonts is a low-risk, high-impact improvement, especially on content-heavy pages.
• Even small CSS changes can influence real user metrics at scale.