Skip to content

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

February 27

・nextjs

next/font とは

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

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

構成要件

  • next: 13.1.6
  • @next/font: 13.1.6

Google Fonts の場合

最高のパフォーマンスのためには Variable fonts の使用が推奨されています。Variable fonts でなくても使用可能です。

Demo & Source (CodeSandbox)

基本的な書き方

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

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 を設定する例です。

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)

複数のフォントを使用

Demo & Source (CodeSandbox)

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

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

// 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> に指定します。

// app/layout.ts

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

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

// app/global.css

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

Demo & Source (CodeSandbox)

スタイルの適用

Demo & Source (CodeSandbox)

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

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

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

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ファイルで次のようにスタイルを指定します。

/* 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)

Google Fonts のほかにローカルのフォントファイルを読み込む方法もあります。 src でフォントファイルのパスを指定する以外はそれほど設定方法に違いはありません。詳しくは 公式ドキュメント をご確認ください。

参照

Tags

javascript how-to react