Tailwindcss font custom

상황🥺

원하는 폰트 패밀리 순서와 실제 폰트 패밀리 순서가 달랐다. 그 이유는 tailwindcss를 사용하고 있기 때문이었다.

tailwindcss에서 지정한 대로 폰트 패밀리가 설정됐다.

 

방법👍

tailwind.config.js 파일에 코드를 추가했다.

module.exports = {
  theme: {
    fontFamily: {
      'sans': ['Roboto', 'ui-sans-serif', 'system-ui', ...],
    }
  }
}

sans가 디폴트인데, 작성한 폰트 순서로 폰트 패밀리가 오버라이딩돼서, 적용된다.

(코드 참고: https://tailwindcss.com/docs/font-family)

 

관련 사이트🔖

https://tailwindcss.com/docs/font-family

 

Font Family - Tailwind CSS