Next.js × Tailwind でのフォント適用

2024/09/08

はじめに

Next.js のアプリで @import を使用してフォントの適用を行っていましたが、いくつかの不具合が発生しました。
これを機にフォントの最適化も兼ねて、next/font を使用したフォント適用の方法に修正することにしました。
修正にあたって、フォント適用方法について調べたので、備忘録としてまとめたいと思います。

next/font を使用しない場合

まずは next/font を使用せずにフォントを適用する方法について説明します。

この場合、通常は @import を使用してフォントを取得し、その後、body 要素などに対してフォントを適用します。

フォントの取得には、Google Fonts から適用したいフォントを選び、[Get embed code] ボタンをクリックして必要な URL を確認します。

URL が確認できたら、global.css ファイル内で @import を使ってフォントを取得します。
次に、body セレクタでフォントを指定することで、ページ全体にフォントが適用されます。

例えば、以下のように記述します。

/* global.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

body {
  font-family: 'Noto Sans JP', sans-serif;
}

Tailwind CSS を使っている場合は、tailwind.config.js で以下のように設定します。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'noto-sans-jp': ['"Noto Sans JP"', 'sans-serif'],
      },
    },
  },
}

この設定により、Tailwind のクラスを使用してフォントを簡単に適用することができます。

@import を使用する方法は簡単で手軽ですが、パフォーマンスや最適化を考慮する場合は、次に説明する next/font を活用することも検討してみてください。

next/font を使用する場合

Next.js には、フォントをセルフホスティングできる next/font というパッケージが用意されています。
これにより、Google にリクエストを送信することなく、Next.js のサーバーからフォントを取得できるようになります。

以下は、その実装手順についてまとめたものです。

まず、パッケージをインストールします。
npm を使用している場合、以下のコマンドを実行します。

npm i @next/font

next/font パッケージのインストールが完了したら、実際の実装に移ります。
以下のコードを pages/_app.tsx に追加します（ Pages Router が使用されている場合）。

// _app.tsx
import { Noto_Sans_JP } from 'next/font/google'

const notoSansJP = Noto_Sans_JP({
  subsets: ['latin'],
  variable: '--font-noto-sans-jp'
})

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={`${notoSansJP.variable} font-noto-sans-jp`}>
      <Component {...pageProps} />
    </main>
  )
}

そして、tailwind.config.js で以下のように設定します。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'noto-sans-jp': ['var(--font-noto-sans-jp)', 'sans-serif'],
      },
    },
  },
}

以上の設定により、アプリ全体で Noto Sans JP が適用されます。

注意点

初めは、${notoSansJP.variable} だけでフォントが適用されると考えていたのですが、この設定だけでは Hiragino Kaku Gothic ProN などのフォールバックフォントが表示されてしまいます。
${notoSansJP.variable} は宣言的な役割であり、実際に Noto Sans JP を適用するためには、Tailwind の設定と同様にfont-noto-sans-jp を指定する必要があります。

おわりに

この記事では、next/font を利用してフォントをセルフホスティングする手順をまとめました。
next/font を使うことで、ビルド時にフォントをダウンロードし、Next.js のサーバーから直接配信することで、フォントの表示速度やパフォーマンスを向上させることができます。

フォント設定を行う機会はあまり多くないため、今回の内容を備忘録として残し、今後の開発で必要になったときに役立てていきたいです。

この記事がフォント適用の際の参考になれば幸いです。

imakyo

モバイルアプリエンジニアです。個人開発や業務での経験を備忘録として発信していきます。

はじめに
next/font を使用しない場合
next/font を使用する場合

注意点

おわりに