tailwind 폰트 적용

tailwind 폰트 적용하는 방법

styles 폴더 하위에 fonts폴더에 notoSansKR.css 파일 생성 후  font-face 붙여놓는다

// notoSansKR.css
@font-face {
  font-family: 'NotoSansKR';
  font-weight: 100;
  font-style: normal;
  src: url('/fonts/NotoSansKR-Thin.ttf') format('truetype');
}
@font-face {
  font-family: 'NotoSansKR';
  font-weight: 200;
  font-style: normal;
  src: url('/fonts/NotoSansKR-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'NotoSansKR';
  font-weight: 300;
  font-style: normal;
  src: url('/fonts/NotoSansKR-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'NotoSansKR';
  font-weight: 400;
  font-style: normal;
  src: url('/fonts/NotoSansKR-Regular.ttf') format('truetype');
}

///....그 외

 

 

❗위와 같이 파일 구성 시 Next.js13 기준 _app.js 파일에 폰트 파일  import 해야 함

// _app.js
import '@/styles/globals.css';
import '@/styles/fonts/notoSansKR.css';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
    </>
  );
}

 

 

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

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

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

 

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

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

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