tailwind 폰트적용

로컬에 폰트파일을 두고 사용하는 경우로 글을 작성합니다.

 

제가 예시로 사용할 폰트는 Tenada 입니다.

다운로드는 https://blog.naver.com/tenada/222849825644 에서 할 수 있습니다.

 

font-face 적용.

css파일에 font-face를 적용시켜주면 되는데, 저는 tailwind 지시문이 있는 css파일에 넣어주었습니다.

어느 css파일이든 상관은 없으나 css파일을 import해서 넣어주는 부분이 앱 구조상 윗단에 있으면 상관 없습니다.

 

이미 이렇게 넣어줌으로써,  className에 tailwind 식으로 넣을 수 있습니다.

<p className="font-['Tenada']">안녕하세요</p>

적용 후

 

 

여기서, 나는 theme으로 정의하고 싶다면 아래의 방법을 따라합니다.

 

tailwind.config.js에서 theme을 정의합니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
	...
  ],
  theme: {
    extend: {
      fontFamily:{
        'tenada':['Tenada']
      },
    },
  },
  plugins: [],
}

 

fontFamily에 적용 후엔 아래와 같이 두가지 방법을 모두 사용할 수 있습니다.

<p className="font-tenada">안녕하세요</p>

<p className="font-['Tenada']">안녕하세요</p>

적용 후