React 에서 Tailwinds 에 custom-font 적용법

 

작업중인 폴더의 tailwind.config 파일을 아래와 같이 수정

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
    // 이 부분을 수정
    fontFamily: {
      primary: "Noto Sans KR, sans-serif", // css서 사용할 폰트명: "사용할 폰트"
    },
  },
  plugins: [],
}

 

css 적용은 아래처럼 가능

import React from 'react'

const App = () => {
  return (
  	<>
    	<div>
            기본 폰트
        </div>
        <div className='font-primary'>
            폰트가 적용되었습니다.
        </div>
    </>
    
  );
}

export default App