Font Optimization
Font optimization encompasses techniques to minimize the performance impact of custom web fonts, including self-hosting, subsetting, proper loading strategies, and preventing layout shifts from font swaps.
Custom fonts are a common cause of both LCP delays (render-blocking font downloads) and CLS (text reflowing when the custom font replaces a fallback). Unoptimized fonts can add 100-500KB to page weight and block rendering for seconds.
Key optimizations: self-host fonts instead of loading from Google Fonts (eliminates third-party DNS lookup and connection), subset fonts to include only needed characters, use `font-display: swap` (shows fallback text immediately, swaps when loaded), and preload the primary font file.
Next.js `next/font` handles all of this automatically. It self-hosts fonts at build time, applies `font-display: swap`, generates CSS with proper fallback metrics (reducing CLS from font swap), and produces optimized font files. Use `next/font/google` for Google Fonts or `next/font/local` for custom files.
Example
// next/font — optimized font loading
import { Inter, JetBrains_Mono } from "next/font/google";
const inter = Inter({
subsets: ["latin"],
display: "swap",
variable: "--font-inter",
});
const mono = JetBrains_Mono({
subsets: ["latin"],
display: "swap",
variable: "--font-mono",
});
// In layout.tsx
<body className={`${inter.variable} ${mono.variable}`}>
{children}
</body>Related terms
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) is a Core Web Vital metric that quantifies how much visible content unexpectedly shifts during the page lifecycle, measuring visual stability.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) is a Core Web Vital metric that measures the time from when the page starts loading to when the largest text block or image element is rendered in the viewport.
Page Speed
Page speed is the measurement of how quickly a web page's content loads and becomes interactive, typically measured by metrics like Time to First Byte (TTFB), First Contentful Paint (FCP), and Largest Contentful Paint (LCP).
Core Web Vitals
Core Web Vitals are a set of three Google metrics — Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) — that measure real-world user experience.
Stop shipping broken SEO
Indxel validates your metadata, guards your CI/CD pipeline, and monitors indexation — so you never miss an SEO issue again.