【完全保存版】Next.js × Google Fonts のベストプラクティス

Next.js で開発を進めていると、「どのように Google Fonts を適切に利用すべきか？」という疑問をお持ちの方も多いのではないでしょうか。

本記事では、Next.js の next/font/google を使ったモダンで最適な Google Fonts の活用方法を、初心者の方にも分かりやすくまとめました。

プロジェクト全体でフォントを設定したい
ある特定のコンポーネントだけ別フォントにしたい
Tailwind CSS との連携方法を知りたい
subsets や display など、各オプションの意味が曖昧

そのようなお悩みを、この記事ひとつで整理していただけます。

1. Next.js でのフォント利用は `next/font` が最適解

Next.js 13 以降、Google Fonts を利用する際には next/font/google を使う方法が推奨されています。理由は以下のとおりです。

フォントがビルド時に最適化され高速
使わない字形を除外して軽量化（自動サブセット化）
CSS や <link> を使った手動管理が不要
FOUT（表示の遅れ）発生を抑えられる

これらの理由から、Next.js では CSS の @import や <link> は推奨されません。

2. Google Fonts の確認方法

Google Fonts の一覧は下記の公式サイトから確認できます。

https://fonts.google.com/

フォント名
太さ（Weight）
スタイル
対応文字セット（subset）
サンプル表示

Next.js の next/font/google で使えるフォントは基本的にここから確認できます。

3. `next/font/google` のオプションを理解する

Google Fonts を読み込む際には、次のようなオプション（パラメータ）を指定できます。

ここでは 重要度の高い順に、分かりやすく解説していきます。

3-1. subsets（文字セット）

どの文字セットを読み込むかを指定します。

例：

subsets: ['latin', 'japanese']

主な subsets の種類：

値	内容
`latin`	英語圏の基本ラテン文字
`latin-ext`	拡張ラテン文字
`japanese`	日本語
`cyrillic`	キリル文字
`greek`	ギリシャ文字
`vietnamese`	ベトナム語

※ フォントごとに対応している subsets が異なるため、Google Fonts で要確認。

3-2. weight（フォントの太さ）

使用するウエイトを指定します。

weight: ['400', '700']

一般的な値：

100：Thin
200：Extra Light
300：Light
400：Regular
500：Medium
600：Semi Bold
700：Bold
800：Extra Bold
900：Black

※ 対応していないウエイトは読み込めません。

3-3. style（スタイル）

フォントの種類（normal / italic）を指定します。

style: ['normal', 'italic']

3-4. display（表示方法）

フォント読み込み中の表示挙動を制御します。

【特に重要】
最も推奨されているのは swap です。

値	意味
`swap`（推奨）	先に代替フォントを表示し、読み込み後に本フォントへ切替
`block`	フォント読み込みまでテキストを非表示
`fallback`	小さな時間だけ待ち、読み込めなければ代替表示
`optional`	ネット環境が悪い場合は読み込まないことも

Next.js では swap 一択と考えて良いでしょう。

3-5. variable（CSS 変数として利用）

Tailwind と組み合わせる際に便利です。

variable: '--font-roboto'

CSS や className で柔軟に適用できます。

3-6. fallback（フォールバックフォント）

読み込み中に表示する代替フォントを指定できます。

fallback: ['Helvetica', 'Arial', 'sans-serif']

3-7. preload（事前読み込み）

必要に応じてプリロードを無効にできます。

preload: false

通常は true のままで問題ありません。

4. よくある利用方法

4-1. プロジェクト全体のフォントを指定する（layout.tsx）

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

const noto = Noto_Sans_JP({
  subsets: ['japanese'],
  weight: ['400', '700'],
  display: 'swap',
});

export default function RootLayout({ children }) {
  return (
    <html lang="ja" className={noto.className}>
      <body>{children}</body>
    </html>
  );
}

4-2. 特定のコンポーネントだけ別のフォントを使う

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

const serif = Noto_Serif_JP({
  subsets: ['japanese'],
  weight: ['700'],
});

export const Title = () => {
  return <h1 className={serif.className}>ここだけセリフ体</h1>;
};

4-3. Tailwind と組み合わせる（実務で非常に便利）

layout.tsx:

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
});

tailwind.config.js:

extend: {
  fontFamily: {
    inter: ['var(--font-inter)'],
  }
}

5. まとめ

本記事では、Next.js で Google Fonts を利用する際のポイントを整理いたしました。

最適解は next/font/google を利用すること
subsets / weight / display（swap）が特に重要
プロジェクト全体でも、部分適用でも柔軟に使える
Tailwind との連携も非常に強力

適切に設定することで、読み込みが速く、美しい文字表示を実現できます。

Next.js での UI 品質向上にお役立ていただければ幸いです。