Next.js Font Performance

next/font CLS 제어

next/font는 빌드 시 폰트를 가져오고 CSS를 자동 생성해 외부 요청을 줄이며 subset, preload, display 전략으로 텍스트 렌더링을 안정화한다.

01

폰트 소스 선택

Google 폰트는 next/font/google, 사내 폰트는 next/font/local로 관리한다.

source
02

subset 제한

사용 언어에 맞는 subsets와 필요한 weight만 선택해 파일 크기를 줄인다.

payload
03

CSS 변수 연결

font variable을 layout className에 연결해 전역 스타일과 디자인 토큰에서 재사용한다.

variable
04

CLS 점검

fallback 폰트와 실제 폰트의 metric 차이로 텍스트가 흔들리는지 확인한다.

stability
Google
외부 런타임 요청 없이 빌드 시 self-hosted 방식으로 최적화된다. 필요한 subset과 weight만 남겨야 효과가 크다.
next/font/google
Local
브랜드 폰트나 라이선스 폰트는 localFont로 파일을 직접 관리한다. woff2 우선, variable font 가능 여부를 확인한다.
localFont
CLS
폰트 로딩 중 텍스트 폭이 바뀌면 레이아웃 shift가 생긴다. display, fallback, metric 조정으로 흔들림을 줄인다.
font metrics

폰트 설정 체크

언어 subset 한국어와 라틴 subset 필요 여부를 실제 콘텐츠로 판단한다.
weight 범위 쓰지 않는 굵기 파일을 불러오지 않는다.
전역 적용 layout에서 className이나 variable이 빠지지 않는다.

폰트 연결

const pretendard = localFont({ src: "./Pretendard.woff2", variable: "--font-sans"
        overflow-wrap: break-word;
        word-break: keep-all;
      });
<body className={pretendard.variable}>