[React] TailwindCSS font 적용하기

TailwindCSS 에 폰트 적용하는 법을 정리해보려한다!

이전에 했었는데 생각이 안나서 다시 찾아봤다.

나중에 또 안 찾아보도록 ...

 

 

폰드 다운로드와 저장

https://fonts.google.com/

Browse Fonts - Google Fonts

우선 위 사이트에서 폰트를 다운받는다

 

폰트 ttf 파일을 프로젝트에 넣어둔다.

나는 src > assets 폴더에 fonts 라는 폴더를 하나 만들어서 여기에 ttf 파일을 저장했다.

 

 

font-face

@font-face {
  font-family: "Roboto";
  src: url("../src/assets/fonts/Roboto-Medium.ttf");
}

 

⬆️ index.css 에 @font-face 를 이용해서 폰트를 불러온다.

 

<div className="font-['Roboto']">Hello</div>

 

그러면 사용할 때 위와같이 font-['폰트이름'] 으로 사용할 수 있다.

 

 

 

tailwindcss의 theme 을 쓰고 싶어요

만약 tailwindcss 의 theme 기능을 이용하고 싶다면 다음의 방법을 따른다.

 

tailwind.config.js 에 들어간다. ⬇️

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        roboto: ["Roboto", "sans-serif"], // "Roboto" 글꼴을 사용하되, 해당 글꼴이 사용 가능하지 않을 경우 시스템의 기본 산세리프 글꼴을 대신 사용하라는 의미
      },
    },
   ...

};

 

theme > extend > fontFamily 에 원하는 이름(roboto)과 아까 저장한 폰트 이름을 써준다 ("Roboto")

<div className="font-roboto">Hello</div>

 

그러면 위와 같이 좀 더 간단하게 작성할 수 있다.

물론, 아까 위와 같이 [ ] 안에 넣어서 쓰는 방법도 그대로 사용 가능하다!