目次
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つのフォントを選びました。これらのフォントは次のようにインポートされます。
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」に対しても適用します。これにより、これらのフォントもプロジェクト内で利用できるようになります。
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のカスタマイズが簡単にできて、プロジェクト固有のニーズに合わせたスタイリングが行えます。
今回の焦点は、フォントファミリーのカスタマイズです。以下に示すコード例では、特にフォントの設定を拡張する方法を紹介します。
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をアプリケーション全体に適用する方法を示しています。
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フォントをテキストに適用する場合は、以下のようにクラスを指定します。
<p className="font-libre">
This is a sample text using Libre Baskerville font.
</p>以上のようにNext.jsでGoogle fontsをTailwindと連携しながら利用することが出来ました。
矢井田 友暉
