WEBフォントデータを読み込んでTailwind.cssで使う方法

はじめに

・TailwindでWEBフォントを使用したい。
・このAdobeのwoffフォントを使いなさいと指示を受け、woffファイルを貰った。

使い方

1. woffファイルをVSCodeのsrc / fontにインポートする。
2. App.cssに以下を追加。

@font-face {
 font-family: Degular-Bold;
 src: url(./font/Degular-Bold.woff2);
}

３．Tailwind.config.jsに以下を追加。

module.exports = {
  theme: {
   extend: {
     fontFamily: {
       'degular_bold': ['Degular-Bold'],
     },

４． App.tsxにfont-使用できるようになる。

<h1 className="font-degular_bold">Hi</h1>