웹 폰트 최적화: TTF를 WOFF2로 변환했을 때의 파일 크기 이점과 로딩 전략

WOFF2는 Brotli 압축 알고리즘을 사용합니다. gzip 압축을 사용하는 WOFF와 비교하면 WOFF2는 파일 크기를 약 30% 줄이며, 압축되지 않은 원시 TTF/OTF 폰트와 비교하면 파일 크기를 약 50% 줄입니다.

크기 압축은 웹 페이지 로딩 시 전송되는 폰트 데이터 양을 직접적으로 줄이고, 대역폭 사용량을 낮추며, 첫 화면 리소스 로딩 완료 시간을 단축합니다. 특히 모바일 네트워크 환경에서의 페이지 접근에 적합합니다.

2016년 이후 출시된 모든 주요 데스크톱 및 모바일 브라우저는 WOFF2 형식을 기본 지원하므로 별도의 호환성 처리가 필요하지 않습니다.

브라우저별 WOFF2 지원 시작 버전은 아래 표에서 확인할 수 있습니다. 현재 모든 주류 브라우저 버전이 이 형식을 지원하므로 프로덕션 환경에서 안전하게 사용할 수 있습니다.

WOFF2 폰트를 사용할 때는 CSS의 @font-face 규칙을 통해 폰트를 선언하고, src 속성의 가장 높은 우선순위 위치에 WOFF2 형식을 할당해야 합니다.

unicode-range 속성과 매칭하면 폰트 서브셋팅이 가능합니다. 각 @font-face가 유니코드 범위에 대응되며 브라우저는 현재 페이지 콘텐츠에 필요한 폰트 서브셋만 로딩하므로 불필요한 리소스 로딩을 줄입니다.

CSS에서 @font-face에 font-display: swap을 선언해야 합니다. 이 속성은 브라우저가 WOFF2 폰트 로딩이 완료되기 전에 기본 시스템 폰트로 텍스트를 표시할 수 있게 하여 첫 화면의 빈 텍스트 블록을 피하고 첫 화면 콘텐츠를 정상적으로 읽을 수 있도록 보장합니다.

CJK(중국어, 일본어, 한국어) 문자 집합 폰트는 수천 개에서 수만 개의 문자를 포함하며 전체 파일 크기가 수 MB에서 10여 MB에 달합니다. 서브셋팅을 통해 페이지에 필요한 문자를 추출하여 단일 파일 크기를 합리적인 범위 내로 유지하고 로딩 성능을 보장해야 합니다.