Useful Cheatsheetsusefulcheatsheets.com

Next.js Font Optimization

Chapter 06 · Page 42

Beginner

Next.js Font Optimization

Load web fonts efficiently with next/font for performance and UX.

TL;DR

01Use next/font to load Google Fonts automatically.
02Font files are hosted locally for faster loading.
03Subset and weight fonts to reduce bundle size.

Tips

01Use next/font to load Google Fonts — it handles optimization automatically and improves Core Web Vitals.

Warnings

01Don't load too many font weights or families — each adds overhead. Stick to 2–3 fonts with a few weights each.

Notes

Useful Cheatsheetsusefulcheatsheets.com

Next.js Font Optimization

Chapter 06 · Page 43

Beginner

Next.js Font Optimization

(continued)

Google Fonts

Import and use Google Fonts with next/font.

import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

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

Fonts are downloaded at build time and hosted locally.
No additional network requests for fonts during page loads.
Automatic font fallback to prevent layout shifts.

Notes

Useful Cheatsheetsusefulcheatsheets.com

Next.js Font Optimization

Chapter 06 · Page 44

Beginner

Next.js Font Optimization

(continued)

Multiple Fonts

Use multiple Google Fonts in the same project.

import { Inter, Playfair_Display } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });
const playfair = Playfair_Display({
  weight: ["400", "700"],
  subsets: ["latin"]
});

export default function Page() {
  return (
    <div>
      <h1 className={playfair.className}>Title</h1>
      <p className={inter.className}>Body text</p>
    </div>
  );
}

Apply different fonts to different elements.
Reduce bundle size by specifying only needed weights.

Use CSS variables to apply fonts globally via Tailwind or CSS.

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

export default function RootLayout({ children }) {
  return <html className={inter.variable}>{children}</html>;
}
// In CSS: font-family: var(--font-inter);

Export fonts from a shared module to avoid duplicate declarations.

// lib/fonts.ts
import { Inter, Roboto_Mono } from "next/font/google";

export const inter = Inter({ subsets: ["latin"] });
export const mono = Roboto_Mono({ subsets: ["latin"] });

Notes

Useful Cheatsheetsusefulcheatsheets.com

Next.js Font Optimization

Chapter 06 · Page 45

Beginner

Next.js Font Optimization

(continued)

Font Weights and Subsets

Specify weights to load only what you need.

const inter = Inter({
  weight: ["400", "500", "700"],
  subsets: ["latin"]
});

Use subsets to reduce font file size.

const playfair = Playfair_Display({
  subsets: ["latin"],  // Only Latin characters
  display: "swap"      // Show fallback while loading
});

Display property controls fallback behavior.

const font = Inter({
  display: "swap",     // Show fallback immediately
  // "auto" (default), "block", "fallback", "optional"
});

Use adjustFontFallback to reduce cumulative layout shift further.

const inter = Inter({
  subsets: ["latin"],
  adjustFontFallback: true // adjusts metrics of fallback font
});

Load a variable font instead of multiple weights for best performance.

const inter = Inter({
  subsets: ["latin"]
  // Inter is a variable font — no weight array needed
});

Notes

Useful Cheatsheetsusefulcheatsheets.com

Next.js Font Optimization

Chapter 06 · Page 46

Beginner

Next.js Font Optimization

(continued)

Custom Fonts

Load custom fonts from local files.

import localFont from "next/font/local";

const customFont = localFont({
  src: [
    {
      path: "../fonts/custom.woff2",
      weight: "400",
      style: "normal"
    },
    {
      path: "../fonts/custom-bold.woff2",
      weight: "700",
      style: "normal"
    }
  ]
});

Place font files in the public folder.

public/
  fonts/
    custom.woff2
    custom-bold.woff2

Use the custom font in components.

Apply a custom font via className on a wrapper element.

export default function RootLayout({ children }) {
  return (
    <html className={customFont.className}>
      <body>{children}</body>
    </html>
  );
}

Use a CSS variable with a local font to integrate with Tailwind.

const customFont = localFont({
  src: "../fonts/custom.woff2",
  variable: "--font-custom"
});
// tailwind.config: fontFamily: { brand: ["var(--font-custom)"] }

Notes

Useful Cheatsheetsusefulcheatsheets.com

Next.js Font Optimization

Chapter 06 · Page 47

Beginner

Next.js Font Optimization

(continued)

Performance Best Practices

Use font display swap to prevent layout shift.

const inter = Inter({
  display: "swap",  // Shows fallback font immediately
  subsets: ["latin"]
});

Load fonts early in the layout for best results.

// app/layout.tsx (root layout)
import { Inter } from "next/font/google";

const inter = Inter();

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

Subset fonts to languages you support.

const inter = Inter({
  subsets: ["latin", "latin-ext"]  // Add extended Latin
});

Measure font impact on Core Web Vitals using web-vitals.

import { getCLS } from "web-vitals";
getCLS(console.log); // CLS score should be near 0 with font optimization

Use preload: false to skip preloading a font that is not above the fold.

const mono = Roboto_Mono({
  subsets: ["latin"],
  preload: false // Only loaded when used, not preloaded
});

Notes

Useful Cheatsheetsusefulcheatsheets.com

Next.js Font Optimization

Chapter 06 · Page 48

Beginner

Next.js Font Optimization

(FAQ)

FAQ

Import the font from next/font/google and call it as a function with your desired options — Next.js automatically downloads the font files at build time and serves them from your own domain, eliminating third-party requests.

Yes, import and instantiate each font separately from next/font/google, then apply their .className or CSS variable to the relevant elements. Keep the total count to 2–3 families to avoid unnecessary payload growth.

A standard @import fetches fonts from Google's CDN at runtime, which adds a render-blocking network request and can hurt Core Web Vitals. next/font self-hosts the files and injects optimized <link> tags with zero layout shift.

Pass weight and subsets arrays when instantiating the font, e.g. weight: ['400', '700'] and subsets: ['latin'] — only those variants are bundled, keeping the font payload as small as possible.

Import localFont from next/font/local and point src at your font file (or an array of files for multiple weights/styles) inside the public or app directory — you get the same automatic optimization as with Google Fonts.