Skip to content
Performance

Why your hero LCP is a font problem

The site measured its own glyph coverage and found the arrows were missing from both shipped fonts. That is what an LCP regression looks like from the inside.

Intermediate1 min read (computed · recorded 7)updated 2026-09-12fontslcpperformancemeasurement

by Motif Editors

revised 2026-09-12First publication in bank-3 batch 4.

Part 1 of 3 in Performance arithmeticThe cost of one dependency

Key takeaways
  • A fallback glyph in the hero headline can be your LCP element.
  • The cmap audit names exactly which glyphs the shipped fonts lack.
  • Fix fonts locally: add the glyph or change the copy.

The measurement that started it

The woff2 cmap decoder in this repo reads the two shipped variable fonts and lists their glyphs: Inter carries 230, Sora 223 — and neither contains → or ←. Every arrow on the site was silently falling back to a system font, with its own metrics, on every hero.

A fallback glyph does not just look wrong. It finishes loading later, and if it is in the hero headline, it is the LCP element the metrics swear by.

Why the swap is invisible until it isn't

font-display: swap trades a blank flash for a layout shift. With a fallback of different width, the headline reflows mid-paint, and the browser re-decides what the largest paint even is.

The fix is boring and local: either the glyph joins the shipped font, or the copy stops using it. Both are cheaper than debugging the metric.

the audit that found it
node scripts/woff2-cmap.mjs   # prints glyph counts per face
# → Inter: 230 glyphs · Sora: 223
# → missing: → (U+2192), ← (U+2190)
Practise the lesson

Theory sticks when you ship it. These original Motif assets put this guide's lesson to work — open one and copy it into your own page.