Google Font에서 제공하는 폰트를 TailwindCSS환경에 적용하는 방법에 대해 정리해보았다.
가령 Nanum Pen Script와 Dancing Script 2종류의 폰트를 사용려한다.
해당 폰트의 css 파일을 불러오기 위해서는, 아래 2가지 방법중 하나를 사용하면된다.
- html
<link>
index.html파일의<head>에 아래 코드를 추가한다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Nanum+Pen+Script&display=swap" rel="stylesheet">- css
@import
index.css파일에 아래 내용을 추가한다.
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Nanum+Pen+Script&display=swap');둘중 하나의 방법을 사용하면, 문서실행시 Google Font에서 css 파일을 받아오는것을 확인할 수 있다.
이제 TailwindCss에서 폰트를 적용하면 된다.
https://tailwindcss.com/docs/font-family
공식문서에서는 font-[<value>] 같은 방식으로 폰트를 직접 할당하는 방법을 안내한다.
가령 Dacing Script 라는 폰트를 사용하고 싶다면, className에 font-["Dancing_Script"]를 적용하면된다.
<p className='text-[16px] font-bold text-base tracking-tight font-["Dancing_Script"]'>
Interstellar
</p>
문자열 "Interstellar"에 필기체가 정상적으로 반영되었다.
또는 tailwind.config.js 파일에 아래와 같이 font-familiy 속성에 대해 alias를 만들어 줄 수 있다.
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}"
],
theme: {
extend: {
boxShadow: {
'even': '0px 0px 12px rgba(0, 0, 0, 0.2)',
},
fontFamily: {
NanumPen: ['"Nanum Pen Script"', 'cursive'],
Dancing: ['"Dancing Script"', 'cursive']
},
}
},
plugins: [require("tailwind-scrollbar-hide")],
}그러면 앞선방식과 같이 font-["Dancing_Script"] 길게 입력한것과 달리 font-Dancing 만으로도 폰트를 적용할 수 있게된다.
