How to Optimize Fonts in Next.js for Faster Loading

Next.js optimizes fonts by using the built-in next/font module, which automatically loads and subsets fonts to reduce load time. You can import fonts directly from Google Fonts or use local fonts with next/font/google or next/font/local to improve performance without manual setup.

Syntax

Next.js provides the next/font module with two main methods: next/font/google for Google Fonts and next/font/local for local font files. You import the font, configure options like subsets and weights, then use the returned className in your components.

• import { FontName } from 'next/font/google': Import Google Fonts.
• const font = FontName({ subsets: ['latin'], weight: ['400', '700'] }): Configure font options.
• className={font.className}: Apply font styles in JSX.

tsx

import { Roboto } from 'next/font/google'

const roboto = Roboto({
  subsets: ['latin'],
  weight: ['400', '700'],
  variable: '--font-roboto'
})

export default function Home() {
  return (
    <main className={roboto.className}>
      <h1>Hello, Next.js Fonts!</h1>
    </main>
  )
}

Output

A page with text styled using the Roboto font loaded and optimized by Next.js.

Example

This example shows how to import the Roboto font from Google Fonts using next/font/google. It loads only the specified subsets and weights, then applies the font style to the main content.

tsx

import { Roboto } from 'next/font/google'

const roboto = Roboto({
  subsets: ['latin'],
  weight: ['400', '700']
})

export default function Example() {
  return (
    <div className={roboto.className}>
      <h1>Optimized Roboto Font in Next.js</h1>
      <p>This text uses the Roboto font loaded efficiently.</p>
    </div>
  )
}

Output

A webpage showing a heading and paragraph styled with the Roboto font loaded only with latin subset and weights 400 and 700.

Common Pitfalls

Common mistakes when optimizing fonts in Next.js include:

• Not specifying subsets or weights, causing larger font files to load.
• Using external <link> tags instead of next/font, missing automatic optimization.
• Forgetting to apply the returned className to your components.
• Loading too many font variants, which slows down page load.

tsx

/* Wrong way: Using external link without optimization */
// In _app.js or _document.js
// <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />

/* Right way: Using next/font/google */
import { Roboto } from 'next/font/google'
const roboto = Roboto({ subsets: ['latin'], weight: ['400'] })

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

Quick Reference

Tips for font optimization in Next.js:

• Use next/font/google to import Google Fonts with automatic optimization.
• Specify only needed subsets and weights to reduce font size.
• Use next/font/local for custom fonts stored in your project.
• Apply the returned className to your components to enable the font.
• Avoid loading fonts via external <link> tags for better performance.

Key Takeaways

Use the built-in next/font module to automatically optimize fonts in Next.js.

Import fonts with next/font/google or next/font/local and specify subsets and weights.

Always apply the returned className to your components to enable the font styles.

Avoid loading fonts via external links to benefit from Next.js font optimization.

Limit font variants to reduce page load time and improve performance.