Zenn
🐌

tailwindcss v4 + NexJS + google font

に公開
Next.js
Tailwind CSS
Google Fonts
tech

【モダンフロントエンド開発】Tailwind CSS v4 と Next.js (next/font) で Google Fonts をスマートに使う方法（設定ファイルレス！）

Webサイトの印象を大きく左右するフォント。Google Fonts を使えば、手軽に豊富な種類のフォントを導入できますよね！ しかも、Next.js の next/font 機能を使えば、パフォーマンス最適化まで自動でやってくれるんです。
今回は、設定ファイル (tailwind.config.js) が不要になることも多い Tailwind CSS v4 と、Next.js の next/font を組み合わせ、さらに CSS カスタムプロパティ を活用して、Google Fonts をスマートかつ柔軟に管理・適用する方法を図解付きで解説します！

完成イメージ:

  • Next.js プロジェクトで Inter (デフォルト用) と Bungee_Tint (装飾用) を使えるようにする。
  • Tailwind のクラス (font-inter, font-bungee) で簡単にフォントを切り替えられるようにする。
  • tailwind.config.js ファイルを使わない（v4 の新アプローチ）。

全体の流れ (3ステップ):

  • Step 1: layout.tsx でフォント読み込み & 変数設定(next/font)
  • Step 2: globals.css でフォント定義
  • Step 3: コンポーネントでクラス適用

ステップ1

  • プロジェクトのルートレイアウトファイル (app/layout.tsx など) で、使いたい
    Google Fonts を next/font/google からインポートし、設定を行います。
  1. インポート
app/layout.tsx
import type { Metadata } from "next";
//使いたいフォントをインポート
import { Bungee_Tint, Inter } from "next/font/google";
import "./globals.css";
  1. フォント設定と変数定義:
    各フォントについて、weight (太さ), subsets (文字セット), そして variable (CSSカスタムプロパティ名) を指定します。
app/layout.tsx
const bungeeTint = Bungee_Tint({
  weight: "400",
  subsets: ["latin"],
  variable: "--font-bungee-tint",
});

const inter = Inter({
  weight: ["400"],
  subsets: ["latin"],
  variable: "--font-inter",
});
  1. <body> タグに変数を適用:
    生成されたフォント変数を <body> タグの className に含めます。
app/layout.tsx
export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="ja">
      <body
        suppressHydrationWarning
        // テンプレートリテラルで複数の変数を結合
        className={`${inter.variable} ${bungeeTint.variable} font-sans antialiased`}
      >
        {children}
      </body>
    </html>
  );
}

ステップ2：globals.css で @theme を使ってフォントファミリーを定義

次に、Tailwind CSS にこれらのフォントを認識させるため、グローバルなCSSファイル (app/globals.css など) を編集します。tailwind.config.js がなくても、@theme ディレクティブを使えばテーマを拡張できます。

app/globals.css
@import "tailwindcss";

/* 設定が「インライン」(その場)で定義されることを明確化 */
@theme inline {
  
   <!-- tailwindのクラス名[font-bungee]にlayout.tsxで定義した変数[--font-bungee-tint]を設定する -->
  --font-bungee: var(--font-bungee-tint);
  --font-inter: var(--font-inter);

}

Point:

  • @theme ブロック内に fontFamily を定義し、各キー（これが font-xxx のクラス名になる）に対して、var() 関数を使ってステップ1で設定したCSS変数を指定します。フォールバックフォントも忘れずに記述しましょう。各定義の最後には必ずセミコロン (;) を付けます。

ステップ3：コンポーネントで Tailwind クラスを使ってフォントを適用

ここまで設定できれば、あとは簡単！ いつも通り、Tailwind のクラス名を使ってフォントを指定するだけです。

app/page.tsx
// 例: 任意のコンポーネント
function MyPage() {
  return (
    <div className="font-inter">
      <p >inter を使用.</p>
      <h1>これは日本語の見出しです。</h1>
      <p>これは日本語の本文です。</p>
   </div>
  );
}

まとめ

この方法なら、Next.js のパフォーマンス最適化と Tailwind CSS v4 の設定ファイルレス（または @theme を使う）アプローチの良いとこ取りができます！

  • layout.tsx で next/font + variable を設定。
  • globals.css で @theme + var() を使ってフォントファミリーを定義。
  • コンポーネントでは font-xxx クラスを使うだけ！

これで、あなたのNext.jsプロジェクトでもGoogle Fontsをスマートに使いこなせるはず！ ぜひ試してみてくださいね！😊

Discussion