Fonts/WOFF

김동현·2026년 3월 21일

mdn 학습 번역 - CSS

목록 보기

100/190

안녕하세요! 프론트엔드 개발 강사입니다. 웹 타이포그래피의 핵심이자 현재 웹 폰트 표준으로 자리 잡은 WOFF(Web Open Font Format)에 대한 문서를 가져오셨군요!

디자이너에게 폰트 파일을 받을 때 .ttf나 .otf 파일 대신 .woff나 .woff2 파일을 웹에 적용하라는 이야기를 자주 들으실 텐데요, 그 이유가 바로 이 문서에 담겨 있습니다. 영문 문서라 조금 딱딱하게 느껴지실 수 있는데, 실무에서 제가 직접 설명하듯 아주 쉽고 명쾌한 구어체로 번역과 해설을 해 드릴게요! 😊

WOFF (Web Open Font Format, 웹 오픈 폰트 포맷)

이 기능은 매우 안정적으로 확립되어(well established) 있으며, 수많은 기기와 브라우저 버전에서 원활하게 작동합니다. 2015년 7월부터 사실상 모든 주요 브라우저에서 사용할 수 있게 되었습니다.

WOFF (Web Open Font Format)는 Mozilla가 Type Supply, LettError 등의 기관과 협력하여 개발한 웹 전용 폰트 포맷입니다. 이 포맷은 TrueType(.ttf), OpenType(.otf), 그리고 Open Font Format에서 사용하는 것과 동일한 테이블 기반(table-based) sfnt 구조를 압축해서 사용합니다. 여기에 더해, 폰트 제작사(foundries)나 판매자가 원할 경우 라이선스 정보를 포함할 수 있도록 미리 정의된 필드 등 메타데이터와 프라이빗 데이터를 추가할 수 있는 구조를 갖추고 있습니다.

웹에서 WOFF를 사용하면 세 가지 주요 장점이 있습니다:

빠른 로딩 속도: 폰트 데이터가 압축되어 있기 때문에, WOFF를 사용하는 웹사이트는 똑같은 글꼴의 압축되지 않은 TrueType(.ttf)이나 OpenType(.otf) 파일을 사용할 때보다 대역폭(데이터)을 훨씬 덜 소모하며 로딩 속도도 훨씬 빠릅니다.
라이선스 문제 해결: 많은 폰트 제작사들이 자신들의 귀중한 원본 .ttf나 .otf 폰트 파일이 웹에 무단으로 굴러다니는 것을 꺼려합니다. 하지만 웹 전용으로 만들어진 WOFF 포맷으로는 웹 사용 라이선스를 기꺼이 허가해 줍니다. 덕분에 웹 디자이너들이 합법적으로 쓸 수 있는 폰트의 종류가 엄청나게 많아졌죠.
완벽한 브라우저 호환성: 상업용 브라우저 제조사나 오픈 소스 브라우저 개발사 모두 WOFF 포맷을 환영했습니다. 그 결과, 파편화되어 있던 과거의 다른 폰트 포맷들과 달리 웹을 위한 진정한 '글로벌 표준', 즉 상호 호환되는 범용 폰트 포맷으로 자리 잡았습니다.

💡 강사의 실무 팁! "TTF 대신 WOFF를 쓰는 이유"
실무에서 디자이너가 폰트를 .ttf로 넘겨준다면, 그대로 웹에 올리지 마세요! .ttf는 압축이 안 되어 있어서 용량이 큽니다. 웹 폰트 변환기(Web Font Generator)를 써서 반드시 .woff나 .woff2로 압축 변환한 뒤 적용해야 사이트 로딩 속도가 획기적으로 빨라집니다.

WOFF에는 두 가지 버전이 있습니다: WOFF와 WOFF2입니다. 이 둘의 가장 큰 차이점은 사용된 압축 알고리즘에 있습니다. (WOFF2가 WOFF보다 약 30% 더 압축률이 좋아 훨씬 가볍습니다!) CSS의 @font-face를 작성할 때, 포맷 지정자(format descriptor) 부분에 각각 'woff'와 'woff2'라고 명시하여 구분합니다.

이 문서의 내용

WOFF 사용하기 (Using WOFF)
WOFF 폰트 변환 도구 (Tools for working with WOFF fonts)
사양 (Specifications)
브라우저 호환성 (Browser compatibility)
같이 보기 (See also)

WOFF 사용하기 (Using WOFF)

웹 콘텐츠에서 텍스트를 표시하기 위해 WOFF 폰트를 사용하려면 CSS의 @font-face 규칙을 사용하면 됩니다. 사용 방법은 기존의 OpenType이나 TrueType 폰트를 적용할 때와 완벽하게 똑같습니다. 유일한 차이점이자 장점은, 압축 기술 덕분에 사용자가 여러분의 웹 콘텐츠를 훨씬 더 효율적이고 빠르게 다운로드할 수 있다는 것입니다.

👨‍🏫 강사의 실무 코드 스니펫! "@font-face 작성법"
실무에서는 로딩 최적화를 위해 용량이 가장 작고 최신 기술인 woff2를 먼저 선언하고, 구형 브라우저를 위한 대비책(fallback)으로 woff를 그다음에 선언합니다.
@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

WOFF 폰트 변환 도구 (Tools for working with WOFF fonts)

일반 폰트를 WOFF로 바꾸려면 도구가 필요하겠죠?

WOFF 폰트 작업을 위한 커맨드라인 도구들(Tools for working with WOFF fonts)이 깃허브에 공개되어 있습니다. sfnt2woff와 woff2sfnt 같은 도구를 사용하면 일반 OpenType/TrueType 폰트와 WOFF 폰트 사이를 자유롭게 변환할 수 있습니다.

💡 강사의 실무 팁! "무료 웹 폰트 변환 사이트"
커맨드라인 툴이 어렵다면, 실무 개발자들이 가장 많이 쓰는 무료 웹사이트인 Transfonter나 Font Squirrel Webfont Generator를 추천합니다. TTF나 OTF 파일을 드래그 앤 드롭으로 올리기만 하면, 최적화된 WOFF/WOFF2 파일과 CSS 코드까지 자동으로 묶어서 다운로드할 수 있게 해줍니다!

사양 (Specifications)

이 포맷에 대한 공식 표준 문서입니다.

사양 (Specification)
WOFF File Format 1.0 # OverallStructure
WOFF File Format 2.0 # FileStructure

브라우저 호환성 (Browser compatibility)

두 포맷 모두 현재 우리가 사용하는 거의 모든 브라우저에서 완벽하게 지원됩니다.

css.at-rules.font-face.WOFF (WOFF 1.0)

데스크탑: Chrome (6+), Edge (12+), Firefox (3.5+), Opera (11.1+), Safari (5.1+)
모바일: Chrome Android (18+), Firefox for Android (4+), Opera Android (24+), Safari on iOS (5+), Samsung Internet (1+), WebView Android (4.4+), WebView on iOS (5+)

css.at-rules.font-face.WOFF_2 (WOFF 2.0)

데스크탑: Chrome (36+), Edge (14+), Firefox (39+), Opera (23+), Safari (10+)
모바일: Chrome Android (36+), Firefox for Android (39+), Opera Android (24+), Safari on iOS (10+), Samsung Internet (3+), WebView Android (37+), WebView on iOS (10+)