Fonts use font-display: swap or optional, not block

A font loaded without font-display: swap defaults to auto behavior — which blocks text rendering for up to 3 seconds while the font file downloads. During this Flash of Invisible Text (FOIT), users see a blank page where content should be. Google Fonts requests without the &display=swap parameter apply this blocking behavior by default. A single Google Fonts link loading 4 weights without swap can delay text visibility by 300–800ms on a 4G connection, directly harming LCP. ISO 25010 performance-efficiency.time-behaviour captures this as a preventable delay in delivering the primary content to the user.

Add font-display: swap to every @font-face declaration, and append &display=swap to all Google Fonts URLs. For Next.js, use next/font which applies swap by default and eliminates the external request entirely.

/* Before — blocks rendering for up to 3s */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
}

/* After — shows fallback font immediately, swaps when ready */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
}

<!-- Before -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700" rel="stylesheet" />

<!-- After -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet" />

// Next.js — preferred: eliminates external request, swap by default
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'], display: 'swap' })