tailwind 폰트 적용하는 방법

globals.css 에서 font-face 적용하기

// globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "Pretendard";
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css")
    format("font-woff2");
  font-weight: normal;
  font-style: normal;
}

그리고 tailwind.config.js 에서 fontFamily를 설정해야 한다.

//tailwind.config.js
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    .......
  ],
  darkMode: "class",
  theme: {
    extend: {
     ......
    },
    fontFamily: {
      pretendard: ["Pretendard"],
    },
  },
  plugins: [],
};
export default config;

그러면 다음과 같이 className에 적용하거나 globals.css에서 html, body에서 폰트를 줄 수 있다.

<h1 className="font-pretendard">안녕하세요</h1>

// globals.css
@layer base {
  html,
  body {
    @apply font-pretendard;
  }
}