Tutorials
Claude Opus 5.5 for font layout shifts on product pages
Ask Claude Opus 5.5 to diagnose a font swap from loading evidence and the actual CSS, not from a finished screenshot alone.
Ask Claude Opus 5.5 to diagnose a font swap from loading evidence and the actual CSS, not from a finished screenshot alone. Compare the same headline before and after its intended font loads. The goal is to keep the product promise and primary button readable through the loading sequence without hiding text or shrinking it until the symptom disappears.
Capture the transition that matters
Record viewport width, browser, language, font family and weight, a cold-load capture and a warm-load capture. Include the font request timing and the heading’s line count. A developer’s question about briefly incorrect fonts illustrates why a cached page can conceal the experience that needs investigation. It is a self-report, not a benchmark for this workflow.
web.dev explains that different space requirements between a web font and its fallback can move content. That establishes a mechanism to investigate; it does not prove every moving button is a font problem.
| Observation | Investigate first | Avoid this shortcut |
|---|---|---|
| Heading gains a line when font arrives | Fallback width and intended weight | Shortening approved product claims |
| Hero image moves before text changes | Image dimensions and reserved space | Changing font settings immediately |
| Only one language clips | Glyph coverage and that language’s wrapping | Applying one Latin-font ratio globally |
| Cold load differs, warm load is stable | Request discovery and loading sequence | Reporting only the cached result |
Turn a screenshot into a measurable question
Consider a fictional 360-pixel viewport with 24-pixel padding on both sides. The content width is 312 pixels. Suppose the same heading occupies two 40-pixel lines in fallback and three after the font swap. Its height changes from 80 to 120 pixels, a 40-pixel increase. These are illustrative arithmetic inputs, not measured Opus output or a CLS score.
Ask whether the CTA moves by that same amount and whether another element also changes. Preserve exact text, weight, width and browser during comparison. A larger fixed-height heading box may reduce movement in one example while clipping a longer translation; test the longest approved text rather than declaring the English screenshot universal.
Choose the smallest justified repair
A closer fallback is one candidate. MDN describes size-adjust for adjusting a font face’s glyph and metric scale. Do not copy an arbitrary percentage into every locale. Measure the intended font and available fallback at the actual weight, then test their wrapping and baseline alignment.
Alternatively, fix a wrongly requested weight or late-discovered critical font. Loading every weight early can compete with product imagery. Changing `font-display` changes the loading tradeoff; it is not a universal guarantee of both immediate branding and zero movement. Record what changed and why, and keep a reversible CSS patch instead of asking for a whole-page redesign.
Prompt for an evidence-based patch
Review this product-page font transition.
Inputs: exact headline and locale, viewport/padding, HTML/CSS,
intended font and weight, available fallback, cold/warm captures,
request timings and measured heading/button rectangles.
Separate observed facts from possible causes. Do not infer timing from one image.
Check whether font swapping explains the measured movement before proposing CSS.
Preserve copy, heading hierarchy, contrast, readable size and CTA behavior.
Suggest the smallest patch, with its tradeoff and a rollback instruction.
Do not invent size-adjust percentages or claim that all scripts share metrics.
Return a before/after test matrix for cold load, warm load, blocked font,
long translated text, narrow viewport and enlarged text.
The 312-pixel content width and 80-to-120 height example is hypothetical;
do not report it as a browser measurement or calculate a CLS score from it.The Opus 5.5 guide is the model reference. The prompt is a proposed review workflow, not a tested claim of superiority over another model.
Sign off the loading states
Repeat the same capture after applying the patch. Check first visit, repeat visit and a blocked font request. The text must remain usable when the custom asset never arrives. Test every supported script and a longer title with enlarged text; inspect the button’s position, not just whether the headline looks attractive.
Prepare campaign imagery in Panelly Studio after the live typography is understood, so a polished image does not disguise an unstable page. This does not imply an Opus integration. Use the landing-page revision workflow for overall hierarchy and brand-style review for visual consistency; neither replaces testing font arrival.
Practical questions
**Can one screenshot prove the fix?** No. It cannot show the transition or a request that never completes. Keep the sequence and test conditions.
**Should I promise a lower CLS score?** Only after measuring with an appropriate tool and comparable conditions. A local improvement is not automatically a field-performance result.
