
<aside>
💡 As of the current date, February 27, 2023, next/font is in beta version. The content of this article may be subject to change.
</aside>

## 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](https://fonts.google.com/variablefonts).  
However, it is also possible to use non-variable fonts.

[Demo & Source (CodeSandbox)](https://codesandbox.io/p/sandbox/next-font-sample-cq3519)

### Basic Usage

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

```jsx
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.

```jsx
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)](https://codesandbox.io/p/sandbox/next-font-sample-cq3519)

### Using Multiple Fonts

[Demo & Source (CodeSandbox)](https://codesandbox.io/p/sandbox/next-font-global-sample-1vonuo)

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.

```jsx
// 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.

```jsx
// app/layout.ts

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

Specify the fonts for the `body` in `global.css`.

```jsx
// app/global.css

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

[Demo & Source (CodeSandbox)](https://codesandbox.io/p/sandbox/next-font-global-sample-1vonuo)

## Applying Styles

[Demo & Source (CodeSandbox)](https://codesandbox.io/p/sandbox/next-font-with-style-sample-iejc7t)

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

```jsx
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.

```jsx
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:

```css
/* 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)](https://codesandbox.io/p/sandbox/next-font-with-style-sample-iejc7t)

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](https://beta.nextjs.org/docs/optimizing/fonts#local-fonts).

## References

- File Conventions: Layout | Next.js [https://beta.nextjs.org/docs/api-reference/components/font](https://beta.nextjs.org/docs/api-reference/components/font)（2023-2-25参照）
- Optimizing Fonts | Next.js [https://beta.nextjs.org/docs/optimizing/fonts](https://beta.nextjs.org/docs/optimizing/fonts)（2023-2-25参照）


Using next/font in Next.js 13

Tags