How to Add Google Fonts in Next.js: Simple Steps

In Next.js, add Google Fonts easily by importing the next/font/google module and using the font function with your chosen font name. This method optimizes font loading and avoids external CSS links.

Syntax

Use the next/font/google module to import Google Fonts. Call the font function with an object specifying the font weight and optional subsets. Then apply the returned className to your components.

tsx

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

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

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

Output

A page displaying the text 'Hello with Roboto font!' styled with the Roboto font.

Example

This example shows how to add the Roboto font with normal and bold weights and apply it to a simple Next.js page.

tsx

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

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

export default function Home() {
  return (
    <main className={roboto.className} style={{ padding: '2rem' }}>
      <h1>Hello, Next.js with Google Fonts!</h1>
      <p>This text uses the Roboto font loaded via next/font/google.</p>
    </main>
  );
}

Output

A webpage with a heading and paragraph styled using the Roboto font from Google Fonts.

Common Pitfalls

• Not using the next/font/google module and instead linking fonts in _document.js can cause slower font loading.
• Forgetting to specify subsets may load unnecessary characters, slowing performance.
• Using incorrect font names or weights will cause fonts not to load.
• Applying the font's className incorrectly will result in default fonts showing.

tsx

/* Wrong way: Linking fonts in _document.js (legacy approach) */
// In pages/_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'] });

export default function Page() {
  return <div className={roboto.className}>Text with Roboto font</div>;
}

Output

Text styled with Roboto font loaded efficiently by Next.js.

Quick Reference

Summary tips for adding Google Fonts in Next.js:

• Use next/font/google for optimized font loading.
• Specify weight and subsets to reduce font size.
• Apply the returned className to your components.
• Avoid external <link> tags for fonts in production.

Key Takeaways

Use next/font/google to add Google Fonts in Next.js for best performance.

Always specify font weights and subsets to optimize font loading.

Apply the font's className to your components to enable the font style.

Avoid adding Google Fonts via external tags in production Next.js apps.

The next/font/google method automatically handles font optimization and loading.