개요

font/woff2는 Web Open Font Format 2.0 웹 폰트의 미디어 타입입니다. WOFF 1.0보다 뛰어난 Brotli 기반 압축으로 파일을 약 30% 이상 더 줄여, 오늘날 웹 폰트의 사실상 표준 포맷입니다.

자세히

WOFF2는 폰트 아웃라인에 Brotli 압축과 폰트 특화 전처리(transform)를 적용해 WOFF 1.0보다 크게 작습니다. 모든 현대 브라우저가 지원하므로, @font-face에서 woff2를 첫 소스로 두고 아주 오래된 브라우저를 위해 woff를 폴백으로 나열하는 것이 표준 패턴입니다. RFC 8081이 정의한 top-level font 타입을 씁니다.

성능 최적화 실무에서 웹 폰트는 렌더링을 지연시키는 병목이 되기 쉽습니다. 중요한 폰트는 `<link rel="preload" as="font" type="font/woff2" crossorigin>`로 미리 로드하고(preload 시 crossorigin 속성 필수), `font-display: swap`으로 폰트 로드 전 폴백 글꼴을 즉시 보여 텍스트가 보이지 않는 시간(FOIT)을 없앱니다. 크로스 오리진 서빙에는 WOFF와 마찬가지로 CORS 헤더가 필요합니다.

문법

e.g. Content-Type: font/woff2

파일 확장자

실무 참고

• font preload에는 crossorigin 속성이 필수입니다(익명 CORS 모드로 요청되기 때문) — 빠뜨리면 이중 다운로드가 발생합니다.
• font-display: swap으로 FOIT(텍스트 미표시)를 방지하고, 크로스 오리진이면 Access-Control-Allow-Origin이 필요합니다.
• 이미 Brotli로 압축돼 있어 전송 gzip은 무의미합니다. 긴 캐시 수명이 적합합니다.

관련 타입

관련 헤더