Audit font-loading strategy to fix layout shift (CLS)
A scenario prompt for tracing a 0.28 CLS score to a page builder's default Google Fonts import, then choosing between font-display swap, self-hosting, and reserved space fixes without breaking the builder's own font settings.
Works with Claude / GPT260 uses★ 3.9
The prompt
performance-font-loading-cls-audit
PageSpeed Insights reports a Cumulative Layout Shift of 0.28 on a site, well past the
0.1 "good" threshold. The Experience section points at heading text shifting position
right after page load.
STACK: [Elementor page builder, custom typography set to Montserrat via Elementor's
Site Settings, Google Fonts loaded via Elementor's default @import method rather than
self-hosted, no font-display value set]
OBSERVATION: [headings visibly render in a fallback serif font first, then snap to
Montserrat about half a second later, which is the actual shift being measured]
Reason through this as a consultant fixing CLS specifically, not general speed advice:
1. Confirm the font swap is the actual cause of this specific CLS number given the
observation, and explain the mechanism: no font-display value means the browser
either blocks rendering or swaps abruptly once the font downloads, and if the
fallback and Montserrat have different average character widths, headings reflow.
2. Give the first fix: setting font-display: swap (or optional) on the @font-face
rule, which stops invisible text but doesn't fully stop the shift, so name this as
a partial fix, not the complete answer.
3. Give the deeper fix: self-hosting the font files instead of loading from Google's
CDN, which removes a DNS/connection round trip and lets font preloading work
reliably, plus using a fallback font stack with matching size-adjust or a similar
font metric so the swap causes less visible reflow.
4. Note the Elementor-specific risk: self-hosting the font means it can't be managed
through Elementor's Site Settings font picker anymore, so document that this needs
a custom CSS or child-theme approach, and that anyone updating fonts later through
the visual UI won't know to also update the self-hosted files.
5. Distinguish what's fixable from wp-admin (adding font-display via a plugin like
Asset CleanUp, or Elementor's own settings if a next version exposes this) from
what needs actual file/theme access (uploading font files, writing @font-face
rules), since not every site has FTP or child-theme editing available.
CLS from font-swapping is one of the more mechanical layout-shift causes to fix, but the
fix that actually helps (self-hosting with matched fallback metrics) is also the one
that quietly moves font management out of the builder’s visual settings panel. This
prompt is written to flag that trade-off instead of hiding it.
If you have Chrome DevTools’ Performance panel open, note the exact timestamp of the
layout shift, it usually lines up precisely with the font file’s network finish time.