{
  "id": 14624807,
  "title": "Why My Fonts Caused Layout Shift: Field Notes on next/font, size-adjust, and Arabic Fallback Metrics",
  "url": "https://urgent.news/2026/10/15/why-my-fonts-caused-layout-shift-field-notes-on-next-font-size-adjust",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-15T06:00:13.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/ahmed_mahmoud360/why-my-fonts-caused-layout-shift-field-notes-on-nextfont-size-adjust-and-arabic-fallback-metrics-2288"
  },
  "original_language": "en",
  "account": "Font-driven layout shift occurs when the fallback font the browser paints first occupies a different box than the webfont that replaces it. Next/font addresses this issue for Latin text by generating a size-adjusted fallback @font-face automatically. However, it does not handle Arabic text, requiring manual computation of the override descriptors. The reporter runs a bilingual site and observed layout shifts on Arabic routes during cold loads. The key takeaways are that font layout shift is a metrics mismatch, not a download-speed issue, and that next/font self-hosts font files, preloads them per route, and generates a fallback @font-face with size-adjust, ascent-override, descent-override, and line-gap-override properties. To remove swap-driven shift, font-display: optional can be used, which has a brief block period and a zero swap period. Download speed does not affect the layout shift, and a warm font cache hides the bug even on local tests. The main causes of font-related layout shift involve the average character width of the fallback and webfont, and the ascent-to-descent ratio, which sets the line box height. The generated fallback by next/font uses Arial or Times New Roman for non-Latin scripts, and it does not pre-load fonts imported in components that never render. Additionally, if CSS re-declares font-family using family names instead of the variable returned by the loader, the generated fallback may be dropped from the chain entirely.",
  "summary": "Font-driven layout shift is a metrics mismatch, not a download-speed problem — the fallback font the browser paints first occupies a different box than the webfont that replaces it. next/font removes that mismatch automatically for Latin text by generating a size-adjust ed fallback @font-face , and it does not remove it for Arabic, where I had to compute the override descriptors myself.…",
  "key_points": [
    "Font-driven layout shift caused by fallback font occupying different box than webfont.",
    "next/font generates size-adjusted fallback @font-face for Latin text, but not for Arabic.",
    "font-display: optional reduces swap-driven layout shift, but download speed is irrelevant."
  ],
  "editors_take": "Automated font optimization tools currently fail to account for non-Latin scripts, forcing developers to manually manage metrics to prevent jarring layout shifts during the initial page load.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}