jaen

tips / nextjs

Using next/font in Next.js 13

February 27, 2023

What is next/font?

next/font is a tool that automatically optimizes fonts, including custom fonts, and removes external network requests for privacy and performance improvement. It works in both the app directory introduced in Next.js v13 and the previous pages folder.

In this article, I will focus on the usage in the app directory.

Prerequisites

  • next: 13.1.6
  • @next/font: 13.1.6

Using Google Fonts

For optimal performance, it is recommended to use Variable fonts.
However, it is also possible to use non-variable fonts.

Demo & Source (CodeSandbox)

Basic Usage

Configure next/font in files like app/layout.tsx or app/page.tsx .

import { Montserrat } from "@next/font/google";

const montserrat = Montserrat({
  subsets: ["latin"],
  display: "swap",
});

export default function Home() {
  return (
    <p className={montserrat.className}>
      Montserrat is applied
    </p>
  );
}

If you are not using Variable fonts, specifying the weight is required. Here's an example using Noto Sans Japanese.

import { Noto_Sans_JP } from "@next/font/google";

const notojp = Noto_Sans_JP({
  weight: ["400", "500"],
  subsets: ["latin"],
  display: "swap",
});

export default function Home() {
  return (
    <p className={notojp.className}>
      Noto Sans Japanese is applied
    </p>
  );
}

Demo & Source (CodeSandbox)

Using Multiple Fonts

Demo & Source (CodeSandbox)

Let's explain how to apply fonts to the entire site as an example.

When specifying multiple fonts, use CSS custom properties (variables). Add the variable option to the font function.

// app/fonts.ts

const montserrat = Montserrat({
  subsets: ["latin"],
  variable: "--font-montserrat",
  display: "swap",
});

const notojp = Noto_Sans_JP({
  weight: ["400", "500"],
  subsets: ["latin"],
  variable: "--font-notojp",
  display: "swap",
});

Specify the variable in the className of the parent container of the element you want to apply the style to. In layout.ts , specify it in the <html> tag.

// app/layout.ts

<html lang="en" className={`${montserrat.variable} ${notojp.variable}`}>

Specify the fonts for the body in global.css.

// app/global.css

body {
  font-family: var(--font-montserrat), var(--font-notojp), sans-serif;
}

Demo & Source (CodeSandbox)

Applying Styles

Demo & Source (CodeSandbox)

Use CSS custom properties (variables) and add the variable option to the font function.

const notojp = Noto_Sans_JP({
  weight: ["400", "500", "700"],
  subsets: ["latin"],
  variable: "--font-notojp",
  display: "swap",
});

Specify the variable in the className of the parent container of the text you want to apply the style to, and specify the styles property used in the CSS file in the className of the text where you want to apply the style.

export default function Home() {
  return (
    <div className={notojp.variable}>
      <h3 className={styles.headline}>
        Noto Sans Japanese 700　/ font-size: 28px is applied
      </h3>
      <p className={styles.text}>
        Noto Sans Japanese 400 / font-size: 16px is applied
      </p>
    </div>
  );
}

In the CSS file, specify the styles as follows:

/* styles/component.module.css */

.headline {
  font-family: var(--font-notojp);
  font-size: 28px;
  font-weight: 700;
}

.text {
  font-family: var(--font-notojp);
  font-size: 16px;
  font-weight: 400;
}

Demo & Source (CodeSandbox)

Besides Google Fonts, you can also load local font files. The only difference in the setup is specifying the path to the font file using src. For more details, please refer to the official documentation.

References

Tags

javascripthow-toreact
Share on Twitter