next/fontとTailwindCSSの設定のメモ

Next/fontとTailwindCSSの設定のメモ

最近、next/fontで呼び出したフォントをTailwindCSSのclassNameから指定できると知ったのでメモ

フォントの呼び出し

classNameにvariableオプションを指定してフォンㇳを読み込む。

const notoSans = Noto_Sans_JP({
  weight: ["400", "500", "700"],
  subsets: ["latin"],
  variable: "--font-noto-sans",
});

tailwind.config.tsにフォントの設定

色々省略しています

const config = {
  theme: {
    extend: {
      fontFamily: {
        "noto-sans": ['var(--font-noto-sans)'],
        "udp-mincho": ['var(--font-biz-udpmincho)'],
      }
    },
  },
} satisfies Config

export default config

これで設定は完了。
tailwind.config.tsに指定したフォントのclassNameを使用したい場所で使う

複数のフォントを呼び出す場合

今回はdiv要素に書いてますがclassNameに複数指定すればOK

import { GeistMono } from "geist/font/mono";
import { GeistSans } from "geist/font/sans";
import { BIZ_UDPMincho, Noto_Sans_JP } from "next/font/google";
import React from "react";

export const FontProvider = (props: React.ComponentProps<"div">) => {
  const { className, ...args } = props;

  return (
    <div
      {...args}
      className={cn(
        notoSans.variable,
        biz_UDPMincho.variable,
        GeistSans.variable,
        GeistMono.variable,
        className,
      )}
    />
  );
};

最後に

間違っていることがあれば、コメントに書いていただけると幸いです。
よろしくお願いいたします。