nextjs + tailwind 환경에서 로컬 폰트를 적용하는 방법을 정리해보았다.
1. 사용하려는 폰트를 다운받는다.
2. 적용하려는 layout.tsx 파일에 localFont를 설정한다.
const pretendard = localFont({
src: "./fonts/PretendardVariable.woff2",
variable: "--font-pretendard",
display: "swap"
});display: "swap"
-> 사용자 정의 폰트가 로드되는 동안 시스템 기본 폰트로 텍스트를 먼저 표시하고, 사용자 정의 폰트가 로드되면 즉시 교체한다는 뜻
장점 : 콘텐츠를 즉시 볼 수 있어 사용자 경험이 향상되고 페이지 로딩 시간이 느려 보이지 않음
단점 : 폰트가 교체될 때 레이아웃이 약간 변할 수 있음
3. layout의 return문 안에서 아래와 같이 작성한다.
return (
<html lang="ko" className={pretendard.variable}>
<body className="font-pretendard">
...
)4. tailwind.config.ts 파일에서 fontfamily를 추가한다.
fontFamily: {
pretendard: ["var(--font-pretendard)", "sans-serif"]
}sans-serif
sans-serif는 폰트 대체 옵션을 나타낸다. 어떤 이유로 폰트를 불러오지 못하거나 사용할 수 없는 경우, 브라우저는 기본 sans-serif 폰트를 사용하게 된다.
