next/font/googleからフォントを読み込んで設定する

Next.jsでGoogle Fontsを使用するための最初のステップは、next/font/googleから必要なフォントをインポートすることです。このプロセスは、Next.jsが提供する専用のライブラリを通じて行われ、簡単かつ効率的にフォントをプロジェクトに組み込むことが可能になります。

ここでは、utiles/font.tsというファイルを作成し、そこにフォントの設定を行います。このファイルでは、Google Fontsから複数のフォントをインポートし、プロジェクト全体で使用できるようにエクスポートする方法を示します。

まずは、必要なフォントをインポートします。ここでは例として、「Noto Sans JP」、「Advent Pro」、「Libre Baskerville」の3つのフォントを選びました。これらのフォントは次のようにインポートされます。

typescript
import { Advent_Pro, Noto_Sans_JP, Libre_Baskerville } from "next/font/google";

続いて、それぞれのフォントに対して、特定のオプションを設定します。これにはフォントのウェイト（太さ）、使用する文字セット、CSS変数名、そしてフォントの表示方法が含まれます。例えば、「Noto Sans JP」の場合、ウェイトは400と700、文字セットはlatin、CSS変数名は--font-notojp、表示方法はswapとして設定されます。

同様の設定を「Advent Pro」と「Libre Baskerville」に対しても適用します。これにより、これらのフォントもプロジェクト内で利用できるようになります。

typescript
export const notoJP = Noto_Sans_JP({
  weight: ["400", "700"],
  subsets: ["latin"],
  variable: "--font-notojp",
  display: "swap",
});

export const adventPro = Advent_Pro({
  weight: ["400", "700"],
  subsets: ["latin"],
  variable: "--font-adventpro",
  display: "swap",
});

export const libreBaskerville = Libre_Baskerville({
  weight: ["400"],
  subsets: ["latin"],
  variable: "--font-libre",
  display: "swap",
});

これらの設定を行うことで、Next.jsプロジェクト内でGoogle Fontsを効率的に利用できるようになります。これは、Webページの視覚的な魅力を高めるだけでなく、ロード時間の最適化にも貢献します。

tailwind.config.jsの設定

Tailwind CSSをNext.jsプロジェクトに適用する際、tailwind.config.jsの設定を行います。このファイルを通じて、Tailwind CSSのカスタマイズが簡単にできて、プロジェクト固有のニーズに合わせたスタイリングが行えます。

今回の焦点は、フォントファミリーのカスタマイズです。以下に示すコード例では、特にフォントの設定を拡張する方法を紹介します。

javascript
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        notoJP: ["var(--font-notojp)"],
        advent: ["var(--font-adventpro)"],
        libre: ["var(--font-libre)"],
      },
    },
  },
  plugins: [],
};
export default config;

この設定では、先にutiles/font.tsで設定したCSS変数（variable）を利用してGoogle FontsをTailwind CSSのフォントファミリーとして追加しています。これにより、notoJP、advent、libreという名前でフォントをプロジェクト全体で使用できるようになります。

このようにtailwind.config.jsを設定することで、プロジェクトに合わせた独自のフォントスタイルを簡単に適用できるようになります。

_app.tsxにフォントの設定をする

Next.jsプロジェクトでGoogle Fontsを効果的に利用するための次のステップは、_app.tsxファイルでのフォント設定です。_app.tsxは、Next.jsの全ページに共通のレイアウトを設定する場所であり、フォントのような全体的なスタイルを適用するのに適していると思います。Next.jsのバージョンが13.4以降でApp Routerを導入している場合は/app/layout.tsxなどのファイルになると思います。

以下に示すコードは、先にutiles/font.tsで定義したGoogle Fontsをアプリケーション全体に適用する方法を示しています。

tsx
import "~/styles/globals.css";

import type { AppProps } from "next/app";

import { adventPro, notoJP, libreBaskerville } from "~/utils/font";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <div
      className={`${notoJP.variable} ${adventPro.variable} ${libreBaskerville.variable} ${notoJP.className}`}
    >
      <Component {...pageProps} />
    </div>
  );
}

この例では、import文を使用してutiles/font.tsからフォントをインポートしています。次に、App関数コンポーネント内で、これらのフォントのCSS変数名とクラス名を適用しています。これにより、フォントはアプリケーション全体で一貫して利用できるようになります。

Noto Sans JPに関してはclassNameプロパティを使って、divタグにフォントのCSS変数名を適用することで、フォントがページ全体で適用されるように設定しています。

フォントをTailwind CSSで設定する

これまでのステップにより、Next.jsプロジェクトにおいて、Tailwind CSSを用いてGoogle Fontsを簡単に適用することが可能となりました。tailwind.config.jsでのフォントの設定とutiles/font.tsでのGoogle Fontsのインポートにより、Tailwindのクラスを通じてフォントスタイルを柔軟に適用することができるようになります。

この設定を用いることで、HTML要素に直接Tailwindのフォントクラスを適用するだけで、望むフォントスタイルを適用できます。例えば、libreBaskervilleフォントをテキストに適用する場合は、以下のようにクラスを指定します。

tsx
<p className="font-libre">
  This is a sample text using Libre Baskerville font.
</p>

以上のようにNext.jsでGoogle fontsをTailwindと連携しながら利用することが出来ました。

矢井田 友暉

植物の美しさを追究する研究者であり、新時代の技術を構築するWeb3.0エンジニアの矢井田です。植物生態学においてはその無垢な美しさに隠された複雑な生態系を解明することに魅了され、Web3.0の開発ではその透明性と効率性がもたらす無限の可能性に挑戦しています。