지연 시간 없이 웹폰트 서빙하기 - Feat. Safari & Edge functions

Context

커스텀 웹폰트 적용 시 폰트 파일 다운로드 완료 전까지 대체 폰트가 표시되는 FOUT(Flash of Unstyled Text) 현상이 발생했다. 한글 폰트는 11,172개의 글리프를 포함하므로 용량이 커 초기 로딩 성능을 저하시켰다. 브라우저가 CSS를 먼저 다운로드한 후 폰트를 요청하는 구조로 인해 Critical Request Depth가 발생했다.

Technical Solution

• Subset Font 생성: fonttools를 사용해 정보 교환용 부호계 범위의 글리프와 사용자 입력 과정에서 생성 가능한 글리프만 포함하도록 폰트 파일 최적화
• preload link 추가: HTML의 Head에 <link rel="preload" as="font" type="font/woff2" crossOrigin href="..." />를 삽입해 CSS 로드와 병렬로 폰트 다운로드 시작
• woff2 포맷 우선 사용: 일반적 지원 범위에서 woff2를 주요 포맷으로 지정하고 woff를 폴백으로 설정 (woff2는 woff 대비 50% 용량 절감)
• CloudFront Function으로 Safari 캐시 문제 해결: Viewer Request 함수에서 Origin 헤더 추가, Viewer Response 함수에서 Vary 헤더의 Origin 필드 삭제
• Terraform IaC로 CDN 함수 관리: aws_cloudfront_function 리소스로 CloudFront Function 코드 버전 관리

Impact

• 폰트 용량 70% 이상 절감 (원본 대비)
• CSS와 폰트 병렬 다운로드로 Critical Request Depth 제거
• Safari에서 폰트 재다운로드 문제 해결

Key Takeaway

웹폰트 성능 최적화는 파일 크기 감소(Subset), 요청 병렬화(preload), 캐시 재활용 문제 해결(Edge Function) 세 가지가 모두 필요하다. 특히 기존 W3C 권장사항과 브라우저 구현의 불일치로 인한 캐시 미스는 CDN 엣지 함수로 요청/응답 헤더를 조정해 해결할 수 있다.