Next.js 13 + Tailwind CSSでGoogle Fontsを使う方法を簡単にまとめます。
Google Fontsのインポート方法とその使い方
【基礎】とりあえずフォントを適用してみる
Next.jsでGoogle Fontsを使うには、next/font/googleからフォントをインポートします。
任意のファイルに以下を追加。
ここでは、utiles/font.ts（js）というフォントをまとめておくファイルを作りました。
import { Noto_Sans_JP } from "next/font/google";
可変フォント (Variable fonts) の利用推奨なので、ここのページに載っているフォントを使いましょう。
続けて以下を追加します。
export const notojp = Noto_Sans_JP({
weight: ["400", "700"],
subsets: ["latin"],
display: "swap",
});
これで、weightが400と700のNoto Sans JPを用意できました。
subsetsとdisplayは、表示を高速化するものなので恐らく必須です。
まとめると以下のようになります。
import { Noto_Sans_JP } from "next/font/google";
export const notojp = Noto_Sans_JP({
weight: ["400", "700"],
subsets: ["latin"],
display: "swap",
});
クラスに割り当てるときは、上で作った変数をファイル内でimportして使用します。
この時、.classNameを付けないと読み込めないので注意です。
import { notojp } from "../utiles/font.ts"
const About = () => {
return <h1 className={notojp.className}>こんにちは！</h1>;
};
export default About;
【応用１】同ブロックでTailwind CSSを追加したい
Google Fontsの使い方はわかりました。
では、このh1にTailwind CSSを一緒に使いたい場合はどうしましょう。
そんな時は、テンプレートリテラルを使います。
<h1 className={`${notojp.className} text-5xl text-bold`}>こんにちは！</h1>
こんな感じで、Tailwind CSSでもGoogle Fontsと組み合わせて使うことができるようになりました。
【応用２】Tailwind CSSのようにクラス + プロパティで書きたい
毎回、テンプレートリテラルを書くのが面倒という方もいるかもしれません。
Tailwind CSSのようにクラス + プロパティでそのまま書けたら便利ですよね。
Tailwind CSSにはCSSを自分好みにカスタマイズできる機能があります。
そんな時に使うのがtailwind.config.jsです。
Tailwind CSSをインストールすれば、自動でファイルが作られていると思います。
ない場合はルート直下に作ってください。
ここのextendでfont-familyのCSSを拡張させます。
module.exports = {
content: [
'./src/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
fontFamily: {
notojp: ['var(--font-notojp)'],
},
},
},
plugins: [],
}
font.tsにvariableを書き加えます。
import { Noto_Sans_JP } from "next/font/google";
export const notojp = Noto_Sans_JP({
weight: ["400", "700"],
subsets: ["latin"],
+ variable: "--font-notojp",
display: "swap",
});
さらに、実際にフォントを使用したい箇所より前に${notojp.variable}を記載し、variableを使用することを明示しなければいけませんが、一番簡単なのはlayout.tsxのhtmlタグに含めることです。
import "@/app/globals.css";
import { notojp } from "@/utiles/fonts";
export default function RootLayout({children,}: {children: React.ReactNode;}) {
return (
<html lang="ja-JP" className={`${notojp.variable}`}>
<body>{children}</body>
</html>
);
}
こうしておけば、ほかのファイルで特にフォントをインポートをする必要がなく、プロパティの記載のみでを自由に使うことができます。
const About = () => {
return <h1 className="font-notojp text-5xl text-bold">こんにちは！</h1>;
};
export default About;