WOFF

Web Open Font Format——웹을 위해 특별히 설계된 최초의 폰트 형식입니다.

.woff Web Open Font Format 1.0
유형압축 바이너리
압축zlib (deflate)
파일 크기TTF보다 약 40% 작음
지원 범위98%+ 브라우저
최적 용도구형 브라우저 폴백
Bobcorn선택적 내보내기

WOFF란?

WOFF 1.0은 Mozilla, Opera, Microsoft가 공동 개발한, 웹을 위해 처음부터 구축된 최초의 폰트 형식입니다. 2012년 12월 W3C 권고안이 되어 웹 타이포그래피의 중요한 이정표가 되었습니다.

핵심적으로 WOFF는 기존 TrueType 또는 OpenType 폰트 데이터를 감싸는 래퍼입니다. zlib 압축을 적용하여 파일 크기를 줄이고 라이선스와 저작자 표시를 위한 선택적 메타데이터 필드를 포함합니다. WOFF 이전에는 웹 개발자들이 크고, 비압축 상태의 TTF나 OTF 파일을 제공해야 했고, 라이선스 정보를 삽입하는 표준 방식도 없었습니다.

핵심 혁신은 세 가지 문제를 동시에 해결하는 전용 웹 폰트 컨테이너를 만든 것입니다: 압축을 통한 파일 크기 감소, 폰트 라이선스를 위한 표준 메타데이터 블록, 그리고 브라우저가 쉽게 검증하고 샌드박스화할 수 있는 보안 형식입니다.

작동 원리

WOFF 컨테이너는 기존 폰트 테이블(TTF 또는 OTF 소스 파일에서)을 테이블별 zlib 압축으로 감쌉니다. 원본 폰트의 각 테이블——글리프 아웃라인, 커닝 데이터, 네이밍 레코드——은 독립적으로 압축되어 브라우저가 필요한 테이블만 압축 해제할 수 있습니다.

WOFF 헤더는 4바이트 시그니처(wOFF)로 시작하고, 뒤이어 폰트 종류(래핑된 데이터가 TrueType인지 CFF인지 표시), 압축된 총 크기, 선택적 메타데이터 블록에 대한 포인터가 옵니다. 브라우저는 헤더를 읽고, 개별 테이블을 원래 형태로 압축 해제한 뒤, 재구성된 폰트 데이터를 텍스트 렌더링 엔진에 전달합니다.

렌더링 엔진 관점에서 압축 해제된 WOFF 파일은 원본 TTF나 OTF와 동일합니다——압축은 완전히 투명하게 처리됩니다.

일반적인 @font-face 사용법
@font-face {
  font-family: 'MyIcons';
  src: url('icons.woff2') format('woff2'),
       url('icons.woff') format('woff');
}

브라우저는 각 src 항목을 순서대로 시도합니다. 모던 브라우저는 WOFF2 파일(더 작고 빠름)을 로드하고, WOFF2를 이해하지 못하는 구형 브라우저는 WOFF 파일로 폴백합니다. 이 캐스케이딩 방식으로 최대 호환성과 최적 성능을 동시에 달성합니다.

장단점

    장점
  • 좋은 압축——원시 TTF보다 약 40% 작음
  • IE 9 이상 포함 폭넓은 지원
  • W3C 권고안 (공식 웹 표준)
  • 메타데이터와 라이선스 지원 포함
  • TTF 또는 OTF 소스에서 간단한 변환
    단점
  • 더 나은 압축을 제공하는 WOFF2에 대체됨
  • 동등한 WOFF2 파일보다 약 30% 큼
  • zlib 압축이 Brotli보다 비효율적

브라우저 지원

WOFF는 2010년대 초부터 모든 주요 브라우저에서 지원되어 웹 폰트의 가장 안전한 폴백 형식입니다. 구형 Internet Explorer 버전도 지원하기 때문에 WOFF2보다 더 넓은 범위의 브라우저를 커버합니다.

브라우저최소 버전
Chrome6+
Firefox3.5+
Safari5.1+
Internet Explorer9+
Edge모든 버전
Opera11.1+

98%+ 글로벌 브라우저 커버리지로 WOFF는 현재 사용 중인 거의 모든 브라우저에서 지원됩니다. 유일한 주목할 만한 공백은 대신 EOT가 필요한 IE 6~8입니다.

WOFF vs WOFF2

WOFF2는 WOFF의 후계자로, 대부분의 실용적인 면에서 엄밀한 개선입니다. 다음은 비교입니다:

항목WOFFWOFF2
압축zlib (deflate)Brotli
압축률TTF보다 약 40% 작음WOFF보다 약 30% 작음
전처리없음글리프 데이터 변환
압축 해제 속도빠름더 빠름
IE 지원IE 9+Edge만 (IE 미지원)
W3C 표준20122018

WOFF2는 Brotli와 특화된 전처리 단계 덕분에 WOFF보다 약 30% 나은 압축률을 제공하며 압축 해제도 더 빠릅니다. 모던 브라우저의 WOFF2 지원도 마찬가지로 폭넓습니다——유일한 공백은 WOFF는 지원하지만 WOFF2는 지원하지 않는 IE 9~11입니다.

2024년 이후 브라우저를 타겟으로 하는 대부분의 프로젝트에서 WOFF2만으로도 충분합니다. WOFF의 유일한 남은 장점은 IE 9~11 커버리지입니다.

WOFF를 사용하는 경우

WOFF2에 대체되었음에도 불구하고 폰트 스택에 WOFF를 포함할 유효한 이유가 여전히 있습니다:

  • WOFF2와 함께 폴백으로——@font-face 선언에서 WOFF2를 먼저 나열하고 WOFF를 두 번째로 두어, 모던 브라우저에는 더 작은 파일을 제공하면서 구형 브라우저도 폰트를 받을 수 있게 합니다.
  • IE 11 지원이 필요할 때——IE 11은 WOFF를 지원하지만 WOFF2는 지원하지 않으므로 WOFF가 해당 브라우저에서 사용 가능한 최선의 압축 형식입니다.
  • Brotli를 지원하지 않는 환경——일부 오래된 빌드 도구, 프록시, CDN은 WOFF2의 Brotli 압축을 올바르게 처리하지 못할 수 있습니다. WOFF의 zlib 압축은 보편적으로 지원됩니다.

이 중 어느 것도 프로젝트에 해당하지 않는다면 WOFF를 안전하게 건너뛰고 WOFF2만 배포할 수 있습니다.

Bobcorn에서
Bobcorn의 내보내기 대화상자에서 WOFF는 선택적 형식입니다. 프로젝트에 IE 11 지원이 필요하다면 항상 포함되는 WOFF2와 함께 활성화하세요. 대부분의 모던 프로젝트에서는 WOFF를 완전히 건너뛰고 WOFF2만 사용해도 됩니다.