Text is initially readable, then a web font arrives and a heading gains another line. font-display controls loading and rendering behaviour, but it does not automatically align the metrics of the two fonts.
Observe the actual transition first. Throttle the connection, disable caching and inspect headings, navigation and long button labels. Record whether text remains invisible, uses a fallback or moves when the font changes.
Compare both renderings
On a test copy, inspect the same page with its font blocked and loaded. Compare line counts, available width and fixed-height controls. A condensed fallback may occupy less space than the eventual web font.
Adjust fallback selection and layout together. CSS also offers metric-adjustment mechanisms, but values need to match the actual font. Do not copy arbitrary percentages from another project.
Choose a loading policy suited to the task. swap can expose readable text early while still allowing a later change. Other values involve different trade-offs rather than a universally optimal outcome.
Test narrow and wide layouts and increased text size after the correction. Preserve content and keyboard operation. Include buttons that move during interaction in the investigation. Compare recordings with the font blocked and loaded.