next/font와 CLS

사용 범위 조사

본문, 제목, 코드 등 실제로 필요한 family와 weight를 먼저 나눈다.

불필요한 100~900 제거

Google 또는 local font를 import하고 subset, weight, display를 명시한다.

자동 self-host

layout이나 특정 영역에 font.className/variable을 붙여 적용 범위를 통제한다.

전역 남발 한계

font swap 전후 글자 폭과 줄바꿈이 바뀌어 CLS가 생기는지 확인한다.

Lighthouse/Web Vitals

Google font

빌드 시 최적화된 자체 호스팅 외부 런타임 요청을 줄이고 preload와 CSS를 Next가 관리한다.

subset 필수

local font

브랜드 폰트를 직접 묶음 woff2 파일, weight mapping, fallback을 정확히 등록해야 한다.

파일 용량 점검

display: swap

빈 텍스트 시간을 줄임 FOUT은 허용하지만 fallback 폭 차이로 CLS가 생길 수 있다.

metric 조정

variable font

여러 굵기를 한 파일 축으로 처리 축 범위가 넓으면 파일이 커질 수 있어 실제 쓰는 범위만 남긴다.

range 제한

네트워크 폰트 요청 수와 총 용량이 예상보다 크지 않은지 확인한다.

CLS 첫 로드에서 제목과 버튼 텍스트 줄바꿈이 바뀌지 않는지 캡처로 본다.

fallback 폰트 실패 시 시스템 폰트로도 레이아웃이 무너지지 않아야 한다.