前提

• tailwindcss:3.4.1
• Nextjs:14.2.4
• フォントのデータは以下を利用
  • ttfファイル
  • Google Fonts

手順

globals.css編集

フォント名とパスを指定する

/* ttfファイル(事前にpublicに置く) */
@font-face {
  font-family: "FontFile";
  src: url("../../public/fonts/FontFile.ttf");
}

/* Google Fonts */
@font-face {
  font-family: "Rampart_One";
  src: url("https://fonts.googleapis.com/css2?family=Rampart+One&display=swap");
}

tailwind.config.ts編集

fontFamilyに追記

import type { Config } from "tailwindcss";

const config: Config = {
  content: [],
  theme: {
    extend: {
      fontFamily: {
        file: ["FontFile", "sans-serif"],
        rampart: ["Rampart_One", "sans-serif"],
      },
    },
  },
};
export default config;

フォントの反映

classNameに[font-〇〇]で指定します。

<div className="font-file"> あいうえお</div>
<div className="font-rampart"> あいうえお</div>