Font loading strategy minimizes layout shift and blocking

Custom web fonts are a dual CLS and FCP risk: without font-display: swap, the browser hides text entirely until the font loads (FOIT — Flash of Invisible Text), delaying FCP and making the page appear blank. When the font finally loads and text reflows to a different line-height or character width, it produces layout shift that contributes to CLS. Google Fonts loaded via external <link> tags compound this by adding an extra DNS lookup and cross-origin connection before the font file starts downloading. ISO-25010 time-behaviour covers both of these: rendering delay and post-render layout instability. Marketing pages with two or more font families at multiple weights can accumulate 300–600ms of font-related latency on slow connections.

Replace Google Fonts <link> tags with next/font — it self-hosts fonts, applies font-display: swap automatically, and generates preload hints so the font starts downloading immediately.

// app/layout.tsx — next/font handles everything
import { Inter, Playfair_Display } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  preload: true,
})

const playfair = Playfair_Display({
  subsets: ['latin'],
  weight: ['400', '700'], // only load weights you actually use
  display: 'swap',
})

export default function RootLayout({ children }) {
  return <html className={`${inter.className}`}>{children}</html>
}

For manual setups without next/font, add font-display: swap to every @font-face in src/styles/globals.css and a <link rel="preload" as="font" crossorigin> for the primary font file in the <head>.