LoginSignup
3

Next.js 13 + Tailwind CSSでGoogle Fontsを使おう

Last updated at Posted at 2023-06-25

Next.js 13 + Tailwind CSSでGoogle Fontsを使う方法を簡単にまとめます。

Google Fontsのインポート方法とその使い方

【基礎】とりあえずフォントを適用してみる

Next.jsでGoogle Fontsを使うには、next/font/googleからフォントをインポートします。

任意のファイルに以下を追加。
ここでは、utiles/font.ts(js)というフォントをまとめておくファイルを作りました。

utiles/font.ts
import { Noto_Sans_JP } from "next/font/google";

可変フォント (Variable fonts) の利用推奨なので、ここのページに載っているフォントを使いましょう。

続けて以下を追加します。

utiles/font.ts
export const notojp = Noto_Sans_JP({
  weight: ["400", "700"],
  subsets: ["latin"],
  display: "swap",
});

これで、weightが400と700のNoto Sans JPを用意できました。
subsetsとdisplayは、表示を高速化するものなので恐らく必須です。

まとめると以下のようになります。

utiles/font.ts
import { Noto_Sans_JP } from "next/font/google";

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

クラスに割り当てるときは、上で作った変数をファイル内でimportして使用します。

この時、.classNameを付けないと読み込めないので注意です。

app/About.tsx
import { notojp } from "../utiles/font.ts"

const About = () => {
  return <h1 className={notojp.className}>こんにちは!</h1>;
};

export default About;

【応用1】同ブロックでTailwind CSSを追加したい

Google Fontsの使い方はわかりました。

では、このh1にTailwind CSSを一緒に使いたい場合はどうしましょう。
そんな時は、テンプレートリテラルを使います。

<h1 className={`${notojp.className} text-5xl text-bold`}>こんにちは!</h1>

こんな感じで、Tailwind CSSでもGoogle Fontsと組み合わせて使うことができるようになりました。

【応用2】Tailwind CSSのようにクラス + プロパティで書きたい

毎回、テンプレートリテラルを書くのが面倒という方もいるかもしれません。
Tailwind CSSのようにクラス + プロパティでそのまま書けたら便利ですよね。

Tailwind CSSにはCSSを自分好みにカスタマイズできる機能があります。
そんな時に使うのがtailwind.config.jsです。

Tailwind CSSをインストールすれば、自動でファイルが作られていると思います。
ない場合はルート直下に作ってください。

ここのextendでfont-familyのCSSを拡張させます。

tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
	  fontFamily: {
		notojp: ['var(--font-notojp)'],
	  },
    },
  },
  plugins: [],
}

font.tsvariableを書き加えます。

utiles/font.ts
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タグに含めることです。

layout.tsx
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>
  );
}

こうしておけば、ほかのファイルで特にフォントをインポートをする必要がなく、プロパティの記載のみでを自由に使うことができます。

app/About.tsx
const About = () => {
  return <h1 className="font-notojp text-5xl text-bold">こんにちは!</h1>;
};

export default About;

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3