🀄
Next.js with Tailwind CSS に Google Fonts を読み込む
はじめに
Next.js で Tailwind CSS を利用しているとき、 Google Fonts を読み込む方法を解説します
対象読者
Next.js で Tailwind CSS を利用している環境で、 Google Fonts を読み込みたい人
本文
前提条件
- Next.js、Tailwind CSS はセットアップ済み（この記事では TypeScript を利用していますが、JavaScript でも同様だと思います）
実装方法
1. next/font側の設定
-
next/fontから利用したい Google Fonts のコンポーネントを読み込こむ - 必要なオプションで初期化し、コンポーネントにマウントする
ここでのポイントは variable: '--font-noto です。
ここで設定した CSS 変数で tailwind.config.js から参照します。
pages/_app.tsx
import '@/styles/globals.css';
import type { AppProps } from 'next/app';
import { Noto_Sans_JP } from 'next/font/google';
+ const noto = Noto_Sans_JP({ weight: ['400', '700'], subsets: ['latin'], variable: '--font-noto' });
export default function App({ Component, pageProps }: AppProps) {
return (
+ <div className={`${noto.variable}`}>
<Component {...pageProps} />
</div>
);
}
2. tailwind.config.js の設定
-
tailwind.config.jsで Font Family の設定を追加する
先程設定した CSS 変数を Tailwind CSS の設定ファイルから参照します。
Tailwind CSS ではプリセットの Font Family がサンセリフ体なので、 sans の先頭に追加します。
tailwind.config.js
/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
theme: {
extend: {
fontFamily: {
sans: ['var(--font-noto)', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [],
};
補足
以下は初期化時の noto の中身です。このオブジェクトを className にマウントすることでグローバルに --font-noto の CSS 変数が利用できるようなります。
console
{
"style": {
"fontFamily": "'__Noto_Sans_JP_50e36f', '__Noto_Sans_JP_Fallback_50e36f'",
"fontStyle": "normal"
},
"className": "__className_50e36f",
"variable": "__variable_50e36f"
}
--font-noto が利用できるのは、ビルド時に以下の <style> が埋め込まれ、ローカルで Web フォントファミリーが定義されるためです。
また Noto Sans JP は日本語フォントなので、サイズが大きいため、分割して参照しているようです。（ちなみに [1]から[8]までは /_next/static/media/*.woff2 を探しても見当たらなかったので、[9]以外のフォントを利用するときにどう参照しているかわからなかったです。）
localhost
<style>
/* [1] */
@font-face {
font-family: '__Noto_Sans_JP_50e36f';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/_next/static/media/f56118dd09ac009d-s.woff2) format('woff2');
unicode-range: ...
}
...
/* [9] */
@font-face {
font-family: '__Noto_Sans_JP_50e36f';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/_next/static/media/e8f33f457585f8d7-s.woff2) format('woff2');
unicode-range: U+971d, U+9721-9724, U+…
}
</style>
Discussion