Font optimization and self-hosting in NextJS - Performance & Optimization

Performance: Font optimization and self-hosting

HIGH IMPACT

This affects page load speed by reducing font file download time and rendering delays caused by font loading.

Loading custom fonts in a Next.js app

NextJS

import localFont from 'next/font/local';

const roboto = localFont({
  src: './fonts/roboto-regular.woff2',
  display: 'swap'
});

export default function App({ Component, pageProps }) {
  return <main className={roboto.className}>
    <Component {...pageProps} />
  </main>;
}

Self-hosting font files eliminates external requests and using font-display: swap avoids blocking text rendering.

📈 Performance GainReduces blocking time by 100-300ms; prevents layout shifts improving LCP and CLS

Loading custom fonts in a Next.js app

NextJS

import '../styles/globals.css';
// CSS imports Google Fonts via @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Loading fonts via external Google Fonts CSS causes render-blocking requests and delays text rendering until fonts load.

📉 Performance CostBlocks rendering for 100-300ms depending on network; triggers layout shifts when fonts load

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
External Google Fonts CSS	No extra DOM nodes	Triggers reflow on font swap	High paint cost on font load	[X] Bad
Self-hosted fonts with font-display: swap	No extra DOM nodes	Single reflow on initial load	Low paint cost, smooth swap	[OK] Good

Rendering Pipeline

Fonts are requested during the critical rendering path. External fonts block text rendering until downloaded and parsed. Self-hosted fonts with font-display: swap allow text to render immediately with fallback fonts, then swap in custom fonts without blocking layout.

→Network Request

→Style Calculation

→Layout

→Paint

⚠️ BottleneckNetwork Request and Style Calculation due to font loading and applying styles

Core Web Vital Affected

LCP

This affects page load speed by reducing font file download time and rendering delays caused by font loading.

Optimization Tips

1Always self-host critical fonts to reduce external network delays.

2Use font-display: swap to avoid blocking text rendering and reduce layout shifts.

3Preload key font files to prioritize font loading in the critical rendering path.

Performance Quiz - 3 Questions

What is the main performance benefit of self-hosting fonts in a Next.js app?

A Reduces external network requests and improves font load speed

B Automatically compresses fonts to smaller sizes

C Eliminates the need for font-display CSS property

D Allows fonts to load only after user interaction

DevTools: Performance

How to check: Record a page load in DevTools Performance panel, filter for 'Font' requests, and observe when fonts finish loading relative to content paint.

What to look for: Look for font load blocking time and layout shifts caused by font swaps to confirm optimization.