웹 폰트는 두 가지 성능 문제를 일으킵니다: 폰트 스왑으로 인한 레이아웃 시프트(CLS)와 큰 폰트 파일이나 외부 연결로 인한 로드 시간 오버헤드. 이 가이드는 두 가지 모두를 다루며, 폰트로 인한 CLS를 0으로 만들고 폰트 로드 시간을 60% 단축하는 구체적인 설정을 제공합니다.
WOFF2: 필요한 유일한 포맷
WOFF2는 Brotli 압축을 사용하며 2016년부터 모든 주요 브라우저에서 지원됩니다. WOFF, TTF, EOT를 더 이상 제공할 이유가 없습니다. WOFF2만 제공하세요.
| 포맷 | 파일 크기 |
|---|---|
| TTF | 220 KB |
| WOFF | 140 KB |
| WOFF2 | 95 KB |
| WOFF2 서브셋 (라틴만) | 18 KB |
서브세팅: 가장 큰 성과
대부분의 폰트는 수백 개의 유니코드 범위에 대한 글리프를 포함합니다. 사이트가 특정 언어만 지원한다면 해당 문자 집합만 필요합니다. 라틴으로 서브세팅하면 일반 폰트를 80~150KB에서 15~25KB로 줄입니다. Next.js의 next/font는 빌드 타임에 Google Fonts를 자동으로 서브세팅하고 자체 호스팅합니다 — 외부 연결 없음.
자체 호스팅 vs Google Fonts
Google Fonts는 여러 번의 DNS 조회와 연결이 필요합니다. 자체 호스팅은 이 단계들을 제거합니다. 빠른 연결에서는 ~100ms 차이, 느린 연결에서는 500ms 이상 차이가 납니다.
font-display: 스왑 제어
| 값 | 동작 | CLS 위험 |
|---|---|---|
| block | 최대 3초 동안 보이지 않는 텍스트 | 낮음 (레이아웃 시프트 없음, FOIT 있음) |
| swap | 즉시 폴백, 준비되면 교체 | 높음 (교체 시 레이아웃 시프트) |
| optional | 아주 짧은 차단, 준비 안 되면 교체 없음 | 없음 (절대 교체하지 않음) |
본문 텍스트에는 font-display: optional이 CLS를 완전히 없앱니다. 제목에는 font-display: swap이 허용 가능합니다.
폰트 프리로딩
<head>에 가장 중요한 폰트 파일에 대한 프리로드 링크를 추가하세요. crossorigin 속성은 동일 출처 폰트에도 필수입니다 — 없으면 이중 다운로드가 발생합니다.
가변 폰트
가변 폰트는 하나의 파일에 모든 굵기와 스타일을 포함합니다. 전통적인 폰트 패밀리 (일반 + 굵게 + 이탤릭 + 굵은 이탤릭)는 4개 파일을 전송합니다. 가변 폰트는 1개 파일 — 일반적으로 단일 굵기보다 작습니다. 동일 패밀리에서 2가지 이상의 굵기가 필요할 때 사용하세요.