How to Use next/font in Next.js for Optimized Fonts

Use next/font by importing a font function like Inter from next/font/google or local from next/font/local, then call it with options to load and optimize fonts automatically. Apply the returned className to your components to use the font with zero layout shift and fast loading.

Syntax

To use next/font, import a font loader from next/font/google or next/font/local. Then call the font function with options like subsets, weight, or variable. The function returns an object with a className property to apply the font style.

• Import: Choose the font source (Google or local).
• Call: Pass configuration options.
• Use: Apply className to elements.

tsx

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

const inter = Inter({
  subsets: ['latin'],
  weight: ['400', '700'],
  variable: '--font-inter'
});

export default function Page() {
  return <main className={inter.className}>Hello with Inter font!</main>;
}

Output

A page displaying 'Hello with Inter font!' styled with the Inter font loaded from Google Fonts.

Example

This example shows how to import the Inter font from Google Fonts using next/font/google, configure it with subsets and weights, and apply it to a page element.

tsx

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

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

export default function Home() {
  return (
    <div className={inter.className} style={{ padding: '2rem' }}>
      <h1>Welcome to Next.js with next/font!</h1>
      <p>This text uses the Inter font loaded and optimized automatically.</p>
    </div>
  );
}

Output

A webpage with a heading and paragraph styled using the Inter font from Google Fonts, loaded efficiently with no layout shift.

Common Pitfalls

• Not specifying subsets can cause larger font files and slower loading.
• Using unsupported weights or styles will be ignored silently.
• For local fonts, forgetting to provide the correct src path causes errors.
• Applying the font without using the returned className means the font won't apply.

tsx

/* Wrong: Missing subsets and not using className */
import { Inter } from 'next/font/google';
const inter = Inter();

export default function Page() {
  return <div>Hello without font applied</div>;
}

/* Right: Specify subsets and use className */
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });

export default function Page() {
  return <div className={inter.className}>Hello with Inter font!</div>;
}

Output

The first example renders default font with no styling; the second example renders text styled with Inter font.

Quick Reference

Use these tips when working with next/font:

• Always specify subsets to reduce font size.
• Use weight and style options to load only needed variants.
• Apply the returned className to your components.
• For local fonts, use next/font/local with correct src paths.
• Fonts load with zero layout shift and automatic optimization.

Key Takeaways

Import fonts from next/font/google or next/font/local and call them with options.

Always specify subsets and weights to optimize font loading.

Use the returned className to apply the font styles in your components.

next/font automatically optimizes fonts for performance and prevents layout shifts.

For local fonts, provide correct file paths and use next/font/local.