폰트 최적화는 전송량, 표시 방식, 레이아웃 흔들림을 함께 줄인다
폰트 파일은 텍스트를 꾸미는 자원이지만, 늦게 도착하면 화면 표시와 Core Web Vitals를 동시에 흔든다.
무거운 웹 폰트
불필요한 두께, 언어 서브셋, 원격 요청이 다운로드 시간을 늘린다.
렌더링 증상
FOIT는 글자가 비고, FOUT는 글자가 바뀌며, 메트릭 차이는 CLS를 만든다.
next/font 제어
빌드 단계에서 파일을 수집하고 subset, display, preload, fallback을 명시한다.
Transfer
받아야 할 바이트
사용하지 않는 굵기와 글리프를 빼면 초기 다운로드가 작아진다.
Paint
텍스트가 보이는 시간
`display: swap`과 preload로 빈 텍스트 구간을 줄인다.
Stability
글자 교체 후 흔들림
fallback 메트릭을 맞춰 폰트 교체 때 레이아웃 이동을 줄인다.