Next.jsとTailwind CSSでカスタムローカルフォントを使用する

問題

Next.js 13プロジェクトでTailwind CSSを利用中に、Google Fontsではないカスタムローカルフォント（例: Surtフォント）を追加しようとすると問題が発生します。典型的なエラーとして：

フォントが正しく読み込まれない
Tailwind CSSでスタイルが適用されない
複数のフォントバリアント（通常、太字、斜体など）を追加する方法が不明
Next.js 13の/appディレクトリ構造で動作しない

解決策

カスタムローカルフォントを正しく追加するには、適切なファイル配置とNext.jsのフォント最適化APIを組み合わせる必要があります。以下が最新のNext.js 13+（appルーター）向けの手順です。

1. パッケージのインストール

注意

Next.js 13.3以降では@next/font/localはnext/font/localに統合されました

bash

npm install @next/font
# または
yarn add @next/font

2. フォントファイルの配置

フォントファイルをpublic/fonts/ディレクトリに配置します：

public/
└── fonts/
    ├── Surt-Normal-Regular.woff2
    ├── Surt-Normal-Bold.woff2
    └── Surt-Normal-Semibold-Italic.woff2

3. フォントの登録（appディレクトリの場合）

src/app/layout.tsx（またはlayout.js）でフォントを定義：

import localFont from '@next/font/local'

// 複数バリアントを一度に定義
const surt = localFont({
  src: [
    {
      path: '../public/fonts/Surt-Normal-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: '../public/fonts/Surt-Normal-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
    {
      path: '../public/fonts/Surt-Normal-Semibold-Italic.woff2',
      weight: '600',
      style: 'italic',
    },
  ],
  variable: '--font-surt'
})

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

注意事項

display: swapはデフォルトで有効
フォントファイルのパスはプロジェクトルートからの相対パス

4. Tailwind CSSの設定

tailwind.config.jsを更新してカスタムフォントを適用：

const { fontFamily } = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './src/app/**/*.{js,ts,jsx,tsx}',
    './src/components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-surt)', ...fontFamily.sans],
        // 追加フォントがある場合
        serif: ['var(--font-other)', ...fontFamily.serif],
      },
    },
  },
  plugins: [],
}

5. コンポーネントでの使用方法

Tailwindのクラスを直接適用：

jsx

export default function Home() {
  return (
    <div>
      {/* 通常フォント */}
      <p className="font-sans">通常のテキスト</p>
      
      {/* 太字フォント */}
      <p className="font-sans font-bold">太字テキスト</p>
      
      {/* イタリック */}
      <p className="font-sans italic">イタリックテキスト</p>
    </div>
  )
}

複数のカスタムフォントを追加する場合

別のフォントファミリー（例：見出し用フォント）を追加するには：

// layout.tsx
const headingFont = localFont({
  src: '../public/fonts/AnotherFont.woff2',
  variable: '--font-heading'
})

export default function RootLayout({ children }) {
  return (
    <html lang="ja" className={`${surt.variable} ${headingFont.variable}`}>
      ...
    </html>
  )
}

// tailwind.config.js
extend: {
  fontFamily: {
    heading: ['var(--font-heading)'],
  }
}

重要なポイント

variableプロパティ
CSS変数名を定義し、Tailwindで参照可能にします
フォントバリアントの自動マッピング
weightとstyleを正しく指定すると、font-boldやitalicクラスで自動的に適切なフォントが選択されます
クラスの適用
ルート要素でclassName={font.variable}を設定しないとTailwindから参照できません
グローバルスタック
font-sansクラスを適用せずにvar(--font-surt)だけ使用してもフォントは変化しません

トラブルシューティング

フォントが反映されない場合:
- ブラウザの開発者ツール > [Network]タブでフォントファイルが取得されているか確認
- HTML要素に.font-sansクラスが適用されているか確認
TypeScriptエラーが発生する場合:
@types/nextパッケージを最新版に更新してください
バリエーションが切り替わらない場合:
各フォントファイルのweightとstyleの値が正しいか再確認

関連記事

Next.jsとTailwind CSSでカスタムローカルフォントを使用する ​

問題 ​

解決策 ​

1. パッケージのインストール ​

2. フォントファイルの配置 ​

3. フォントの登録（appディレクトリの場合） ​

4. Tailwind CSSの設定 ​

5. コンポーネントでの使用方法 ​

複数のカスタムフォントを追加する場合 ​

重要なポイント ​

トラブルシューティング ​