
<aside>
💡 記事を書いた2023年2月27日現在 next/font はベータ版です。本記事の内容は変更される可能性があります。
</aside>

## next/font とは

カスタムフォントを含むフォントを自動的に最適化し、プライバシーとパフォーマンス向上のため外部ネットワークリクエストを削除するものです。  
Next.js v13 で追加になった app ディレクトリとそれ以前の pages フォルダでも機能します。

ここでは app ディレクトリでの使用方法について紹介します。

## 構成要件

- next: 13.1.6
- @next/font: 13.1.6

## Google Fonts の場合

最高のパフォーマンスのためには [Variable fonts](https://fonts.google.com/variablefonts) の使用が推奨されています。Variable fonts でなくても使用可能です。

[Demo & Source (CodeSandbox)](https://codesandbox.io/p/sandbox/next-font-sample-cq3519?file=%2Fapp%2Fpage.tsx)

### 基本的な書き方

`app/layout.tsx` や `app/page.tsx` などで `next/font` を設定します。

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

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

export default function Home() {
  return <p className={montserrat.className}>Montserrat が適用される</p>;
}
```

Variable fonts でない場合は `weight` の指定が必須です。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 が適用される</p>;
}
```

[Demo & Source (CodeSandbox)](https://codesandbox.io/p/sandbox/next-font-sample-cq3519?file=%2Fapp%2Fpage.tsx)

### 複数のフォントを使用

[Demo & Source (CodeSandbox)](https://codesandbox.io/p/sandbox/next-font-global-sample-1vonuo?file=%2Fapp%2Fpage.tsx)

サイト全体に適用する方法を例に説明します。

複数のフォントを指定する場合は CSSのカスタムプロパティ（変数）を使用します。フォント関数に `variable` を追加します。

```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",
});
```

スタイルを適用したい要素の親コンテナの className に `variable` を指定する必要があるため、 layout.ts の `<html>` に指定します。

```jsx
// app/layout.ts

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

global.css で `body` にフォントを指定します

```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?file=%2Fapp%2Fpage.tsx)

## スタイルの適用

[Demo & Source (CodeSandbox)](https://codesandbox.io/p/sandbox/next-font-with-style-sample-iejc7t?file=%2Fapp%2Fpage.tsx)

CSSのカスタムプロパティ（変数）を使用します。フォント関数に `variable` を追加します。

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

スタイルを適用するテキストの親コンテナの className に `variable` を指定し、スタイルを適用するテキストの className に CSS ファイルで使用する `styles` プロパティを指定します。

```jsx
export default function Home() {
  return (
    <div className={notojp.variable}>
      <h3 className={styles.headline}>
        Noto Sans Japanese 700　/ font-size: 28px が適用される
      </h3>
      <p className={styles.text}>
        Noto Sans Japanese 400 / font-size: 16px が適用される
      </p>
    </div>
  );
}
```

CSSファイルで次のようにスタイルを指定します。

```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?file=%2Fapp%2Fpage.tsx)

Google Fonts のほかにローカルのフォントファイルを読み込む方法もあります。 `src` でフォントファイルのパスを指定する以外はそれほど設定方法に違いはありません。詳しくは [公式ドキュメント](https://beta.nextjs.org/docs/optimizing/fonts#local-fonts) をご確認ください。

## 参照

- 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参照）


Next.js 13 - next/font の使い方

Tags