Tailwind에서 custom fonts사용하기

Next.js 앱 개발에 Tailwind CSS 프레임워크를 사용하고 있다.

그런데 Tailwind에서 custom fonts를 사용하려면 다음과 같이 설정을 해주어야 한다!

우선 사용하고자 하는 폰트를 globals.css에 저장하기.

<globals.css>
@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "Cafe24Shiningstar";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Shiningstar.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

그리고 tailwind.config.js 에서 다음과 같이 fontFamily를 설정해주어야 한다.

<tailwind.config.js>

module.exports = {
  content: [
   ............
  theme: {
    extend: {},
    fontFamily: {
      Cafe24Shiningstar: ["Cafe24Shiningstar"],
    },
    //fontFamily 추가
  },
  plugins: [],
};

그리고 다음과 같이 font-내가 설정한 Font이름 으로 사용하면 ..??!

<h1 className="text-white font-Cafe24Shiningstar">Husic</h1>

성공!!👍