Next.js + Tailwind CSSでGoogle Fonts

  • 投稿日
  • 著者 kngsmym
  • カテゴリー Next.js

いくらか調べてやってみて、自分の環境でうまくいったときのメモ。

フォントのインポート

任意のファイルに以下を記述します。

import { Open_Sans } from "next/font/google";
export const opensans = Open_sans({
  weight: ["400", "700"],
  subsets: ["latin"],
  display: "swap",
});

赤太字で書いた箇所のOpen_Sansはフォント名をアンダースコアでつなげたものなのでGoogle Fontsの名称に従い、opensansはそのフォントを使用する際のオブジェクト名として使用する変数名なので任意の自分がわかりやすい値を付けます。

weightで読み込みたいフォントウェイトを指定します。この項目で指定したウェイトのみがtailwindで指定したときに反映されるようになるので、使いたいフォントウェイトを指定します。

もちろん指定した分のファイルが読み込まれるわけなので、使いたいフォントウェイトと応答速度の兼ね合いになりますね。display:swapなども含めそのあたりは普通にGoogle Fontsを使うときの諸々と同じです。

画面側

次に画面側。使用するコンポーネントで以下のような感じで記述します。

import { opensans } from "../lib/font";

〜略〜

<div className='font-light ${opensans.className}'>
  テキスト
</div>

前項で書いたフォントを読み込む記述を僕は../lib/font.tsというファイルに記述したので、そこからopensansをインポートして、オブジェクトのプロパティopensans.classNameを参照する形でclass名を記述します。

フォントウェイトとして300,700を読み込んでいて、ここでは300にしたいのでfont-lightで300を指定しています。

以上で完了です。

Tailwind.config.jsなどに追加して他のclassにまじえて普通に書くだけで使えるようにする書き方もありますが、今回は一箇所使えればいいかってことで一旦ここまで。

Next.js 手探りReact