폰트 로딩 점검 기준

폰트는 출처보다 먼저 필요한 글리프와 두께 축소

next/font는 자동 self-hosting과 preload를 처리하지만, 서브셋과 weight를 넓게 잡으면 다운로드 비용과 CLS 위험이 다시 커집니다.

폰트 최적화 조건

본문 전체인지 로고와 제목 일부인지 사용 범위를 먼저 나눕니다.

scope

Google Fonts는 next/font/google, 보유 파일은 local을 씁니다.

google / local

페이지에 필요한 문자 범위만 로드해 전송량을 줄입니다.

subsets

100부터 900까지 모두 받지 말고 실제 디자인 토큰에 맞춥니다.

weight

대부분 swap으로 텍스트를 빨리 보이고 레이아웃 변화를 확인합니다.

display

CLS 기준

폰트가 바뀔 때 줄 높이와 글자 폭이 크게 달라지면 CLS가 생깁니다. 적용 후 Lighthouse와 실제 모바일 화면에서 텍스트 밀림을 확인합니다.

variable: "--font-main"

상황

선택

줄일 것

확인할 지표

공개 웹

next/font/google

subsets, weight

전송 크기

브랜드 서체

next/font/local

woff2 우선

라이선스와 캐시

느린 네트워크

optional 고려

preload 남발

텍스트 표시 시간