---
title: "Load fonts with next/font to avoid layout shift"
description: "next/font downloads and self-hosts Google or local fonts at build time, generates size-adjust fallbacks and removes the render-blocking stylesheet request. Import the font in the layout, pass its className to the html element, and reference the CSS variable in styles. Verify with a throttled trace that text does not shift and that no font request leaves your origin."
url: "https://seo-mcp.io/t/load-fonts-with-next-font-to-avoid-layout-shift"
---

# Load fonts with next/font to avoid layout shift

next/font downloads and self-hosts Google or local fonts at build time, generates size-adjust fallbacks and removes the render-blocking stylesheet request. Import the font in the layout, pass its className to the html element, and reference the CSS variable in styles. Verify with a throttled trace that text does not shift and that no font request leaves your origin.

## Prerequisites

- Next.js project with a root layout
- The font family, weights and subsets the design uses

## Steps

1. **Import the font in the layout** — Import the font from next/font/google or next/font/local in app/layout.tsx, pass subsets and weights, and assign the returned className to the html element.
   Check: The rendered html element carries the generated font class and no link tag points at fonts.googleapis.com.
2. **Reference it through a CSS variable** — Set variable to a name such as --font-sans and use that variable in the global stylesheet so components inherit the same family without importing it again.
   Check: grep -n 'font-family' app/globals.css shows the variable, and the built CSS contains no external font URL.
3. **Measure the swap** — Run a throttled mobile trace with the network cache disabled and record layout shift around the first text paint. Compare it with the previous build.
   Check: Lighthouse reports CLS below 0.1 on the typography-heavy template.
4. **Trim weights and subsets** — Load only the weights and subsets the design uses, then re-check the font files served. Remove unused families before deploying.
   Check: The network panel shows two font files at most for the primary family.

## Source

@seo-mcp on 2026-10-19: https://nextjs.org/docs/app/api-reference/components/font

Canonical: https://seo-mcp.io/t/load-fonts-with-next-font-to-avoid-layout-shift