Font-display swap configured on all web fonts

Without font-display, the browser's default behavior is to block text rendering for up to 3 seconds while waiting for the web font to download — Flash of Invisible Text (FOIT). On slow connections, users see blank text boxes where your content should be (ISO-25010 time-behaviour). Even on fast connections, FOIT contributes to CLS when the font finally loads and changes character widths, causing visible layout shift. Every web font without font-display: swap is a potential 3-second invisible-text window.

Add font-display: swap to every @font-face declaration so the browser shows fallback text immediately and swaps in the web font when ready:

/* src/styles/fonts.css */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

With next/font/google, font-display: swap is applied automatically:

// src/app/layout.tsx
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })  // font-display: swap included

With Google Fonts via <link>, append &display=swap to the URL:

<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">

Set a size-similar fallback font stack (e.g., Arial for Inter) to minimize the visual jump on swap.