Next.js + Tailwindで bodyにフォントを指定しても効かないときの対処法

はじめに

Next.js プロジェクトで next/font/google を使って日本語フォント（例：Sawarabi Gothic、Noto Sans JP など）をbodyに適用しようとしていました。

しかし、いくらbody に font-family を指定しても効かなかったので、今回はその対処法を記事として残します。

症状

body {
  font-family: var(--font-sawarabi);
}

と書いても、なぜか英数字だけ別のフォント（ui-sans-serif など）が使われてしまう。

原因

Tailwind CSS の preflight（ベーススタイル）により、html や body にデフォルトの font-family が強く指定されている。
その結果、CSS変数で指定したフォントが上書きされない。

preflightとは

Tailwind CSS が提供するグローバルなリセットCSS

• 各ブラウザで異なる初期CSSの差をなくすために適用される
• body, html, h1〜h6, a, button などにベーススタイルが自動で入る
• これにより body の font-family や margin が強く設定されてしまう

そのため、body のフォント指定が効かないことがあります。
逆に h1 などの要素には効いていた場合、これは preflight の影響が弱いからです。

この方のようにpreflightを丸ごとリセットしても良いと思います。

試したが効かなかった方法

以下のように @layer base 内で font-family を指定する方法を試したが、
Tailwindのデフォルトスタイルにより上書きされてしまい、期待した通りには動作しなかった。

@layer base {
  body {
    font-family: var(--font-sawarabi);
  }
}

解決方法

body {
  font-family: var(--font-sawarabi) !important;
}

!important を使って、Tailwindのベーススタイルより強く指定することで、
意図したフォント（特に日本語フォント）を正しく反映できる

注意点

• !important はできるだけ最小範囲で使う（bodyだけに限定）
• next/font/google の variable を html タグに適用していることを確認
• globals.css などで .font-[name] を定義し直してもOK

---

今回のように局所的に一つだけフォントを直したいときはこの対応で良いと思います
他に良い対処法があれば随時アプデしていこうと思います。