Next.js - 폰트 적용하기

Next.js 폰트 적용하기

Pretendard 폰트란?

시스템 UI 대체용으로 설계된 오픈소스 산세리프(Neo-grotesque) 폰트이다. 크로스-플랫폼 환경에서 한글·라틴·일본어 지원을 고려해 가독성을 극대화했으며, 다음과 같은 특징이 있다.

1. 다국어 지원: 한글·라틴·일본어 글리프를 모두 포함해 다양한 언어 환경에 적합
2. 굵기(weight): Thin, Light, Regular, Medium, SemiBold, Bold, ExtraBold, Black 총 9가지 고정 굵기 + Variable Font 버전

pretendard 폰트를 다운받을 수 있는 github 링크

폰트 적용하기

1. 압축을 푼 뒤, web/variable 아래에 있는 woff2 를 사용한다.
2. static/fonts 폴더를 만들어서 아래와 같이 PretendardVariable.woff2파일을 넣어준다.
   
3. app/layout.tsx 파일에 아래와 같이 셋팅을 해준다.
   

1. src: '../fonts/PretendardVariable.woff2'
   • 폰트 파일의 경로이다.
   • PretendardVariable.woff2는 woff2 포맷으로 된 Pretendard 폰트 파일을 사용하겠다는 뜻
   • 이 경로는 public 폴더를 기준으로 설정해야 하므로, 프로젝트 구조상 public/fonts/PretendardVariable.woff2에 있어야 한다.
2. display: 'swap'
   • 폰트 디스플레이 방식을 설정한다.
   • 'swap'은 폰트가 로드되지 않았을 때, 대체 폰트를 먼저 표시한 후, 폰트가 로드되면 원래 폰트로 바꾸는 방식이다. 이는 웹폰트 로딩 시의 깜박임을 방지하는데 도움을 준다.
3. weight: '100 900'
   • 폰트의 굵기 범위를 설정한다.
   • '100 900'은 100에서 900까지의 폰트 굵기를 지원한다는 뜻이다.
4. variable: '--font-pretendard'
   • 커스텀 CSS 변수로 폰트를 설정하는 부분이다.
   • --font-pretendard는 CSS에서 사용될 변수명이고, 이를 통해 나중에 CSS에서 font-family를 쉽게 설정할 수 있다.