Web Font Loading Optimization

Web fonts can block rendering, cause layout shift, and add 100–500ms to your FCP. The right combination of font-display, preloading, and font metric overrides eliminates these issues without sacrificing design.

font-display Strategy Comparison

Self-Hosting with @font-face

/* styles/fonts.css */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;       /* Variable font range */
  font-display: swap;         /* Show fallback, swap when ready */
  unicode-range: U+0000-00FF; /* Only Latin characters (subset) */
}

/* Reduce CLS with metric overrides */
@font-face {
  font-family: 'Inter-fallback';
  src: local('Arial');
  ascent-override: 90%;       /* Match Inter's metrics */
  descent-override: 22.43%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}

body {
  /* Fallback matches Inter layout — near-zero CLS on swap */
  font-family: 'Inter', 'Inter-fallback', Arial, sans-serif;
}

Preloading Critical Fonts

<!-- Preload only the font used above the fold -->
<link
  rel="preload"
  href="/fonts/inter-var.woff2"
  as="font"
  type="font/woff2"
  crossorigin
>

<!-- If still using Google Fonts (not recommended) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
  rel="stylesheet"
>

Font Subsetting (Reduce Size 30–60%)

# Install fonttools
pip install fonttools brotli

# Subset to Latin characters only
pyftsubset Inter.ttf \
  --output-file=inter-latin.woff2 \
  --flavor=woff2 \
  --layout-features='kern,liga,calt' \
  --unicodes="U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD"

# Result: Inter.ttf (3.4MB) → inter-latin.woff2 (68KB)

Next.js Built-in Font Optimization

// app/layout.tsx — Next.js handles preloading + size-adjust automatically
import { Inter, Playfair_Display } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
});

// Or self-hosted local font
import localFont from 'next/font/local';
const myFont = localFont({
  src: './fonts/inter-var.woff2',
  display: 'swap',
  variable: '--font-inter',
});

export default function Layout({ children }) {
  return (
    <html className={inter.variable}>
      <body>{children}</body>
    </html>
  );
}