[Tailwind CSS] Next.js 15, Tailwind CSS v4 에 Pretendard 폰트 적용하기

사실상 현업 표준으로 자리잡은 한글폰트인 Pretendard 폰트를 Next.js 15+Tailwind CSS v4에 적용하는 과정이다. 자료가 많아서 매우 간단하게 적용할 수 있었다. 다만 Tailwind CSS v4부터는 tailwind.config.js 파일 대신에 global.css에 모든 사용자 지정 설정을 하기 때문에 이 부분에 유의하여 작업한다.

Nextjs 공식문서 - Local Font with Tailwind CSS v4

우선 로컬 폰트로 사용할 것이기 때문에, 압축 파일을 다운받아 'Pretendard-1.3.9\web\variable\woff2' 경로에 있는 PretendardVariable.woff2를 프로젝트의 원하는 경로에 위치시킨다. 나같은 경우는 루트/src/shared/assets 에 위치시켰다.

프리텐다드 저장소

tailwind css에 사용자 지정 스타일로써 적용하기 위해 global.css에 아래와 같이 지정한다. 사용자 정의 속성: var(CSS 변수) 형식이다.

이후 프로젝트에 적용할 범위를 고려하여 해당 스타일을 적용한다. 나의 경우 전체 프로젝트에 적용할 것이어서 루트레이아웃의 body 태그에 적용하였다. 이렇게 사용하려면 Nextjs가 제공하는 localFont 모듈을 불러와 선언해야 한다.

• 구성
  • src: 폰트파일의 상대경로
  • display: 인용 참고*
  • weight: 폰트 굵기
  • variable: tailwind css가 인식하는 변수명 (--변수명 형식)

css font-display 속성
쉽게 말하면 적용할 폰트와 대체 폰트 간의 교체 방식과 타이밍을 정의하는 것이다.
MDN font-display

폰트가 잘 적용된 것을 확인할 수 있다.