otf ttf woff2 차이 — 웹폰트로 woff2를 쓰는 이유
OTF·TTF·WOFF2의 차이는 "어디에 쓰는 폰트냐"로 갈립니다. TTF·OTF는 컴퓨터에 설치하는 데스크톱용 폰트이고, WOFF2는 웹페이지에서 내려받게 만든 웹 전용 포맷입니다. 셋의 글자 모양(외곽선) 데이터는 사실상 같고, WOFF2는 그 데이터를 Brotli로 압축해 감싼 컨테이너일 뿐입니다. 그래서 웹에는 파일이 가장 작은 WOFF2를 씁니다. 아래에서 TTF와 OTF의 차이, WOFF·WOFF2가 왜 웹에 유리한지, 그리고 흔한 오해(WOFF2가 글자를 더 선명하게 해준다?)까지 정리합니다. (2026년 7월 27일 공식 문서 확인 기준)
TTF와 OTF의 차이
TTF(TrueType Font)와 OTF(OpenType Font)는 둘 다 OpenType(sfnt) 구조를 따르는 폰트입니다. 갈리는 지점은 글자 외곽선을 어떤 곡선으로 그리느냐입니다.
| 항목 | TTF | OTF |
|---|---|---|
| 외곽선 | TrueType 곡선(2차 베지어, glyf 테이블) |
PostScript/CFF 곡선(3차 베지어, CFF 테이블) |
| 파일 시그니처 | 0x00010000 |
'OTTO' |
| 강점 | 화면 힌팅 세밀, 널리 호환 | 합자·자동 대체 등 고급 타이포그래피 표현 |
정리하면, TTF와 OTF는 둘 다 데스크톱에 설치해 쓰는 비압축 폰트이고, 세밀한 차이는 외곽선 방식과 지원하는 타이포그래피 기능에 있습니다. 일상적인 문서 작업에서는 체감 차이가 크지 않습니다.
WOFF·WOFF2는 뭐가 다른가 — 웹 전용 컨테이너
WOFF(Web Open Font Format)와 WOFF2는 새로운 글자 모양을 만든 게 아닙니다. 위의 TTF/OTF 폰트 데이터(sfnt 테이블)를 그대로 담되, 압축하고 라이선스 같은 메타데이터를 붙여 웹에서 @font-face로 내려받기 좋게 감싼 컨테이너입니다.
- WOFF 1.0 — Flate(zlib) 압축
- WOFF2 — Brotli 압축(콘텐츠 인식 전처리 + 개선된 엔트로피 코딩)으로 WOFF 1.0보다 더 작음
웹에서 WOFF2를 쓰는 이유
1. 파일이 가장 작다 → 로딩이 빠르다
WOFF2는 Brotli 압축 덕에 WOFF 1.0보다 평균 최대 약 30% 더 작습니다(web.dev 기준). 비압축인 TTF/OTF를 그대로 웹에 올리는 것보다는 훨씬 더 작아집니다. 폰트 파일이 작을수록 첫 화면에서 글꼴이 늦게 뜨는 현상이 줄고, 모바일 데이터도 아낍니다. 웹 성능 관점에서 WOFF2를 쓰는 가장 큰 이유가 이 파일 크기입니다.
2. 모든 최신 브라우저가 지원한다
WOFF2는 전 세계 사용자의 약 96.7%가 쓰는 브라우저에서 지원됩니다(caniuse 기준). Chrome 36+, Edge 14+, Firefox 39+, Safari 12+(10–11은 부분 지원), Opera 23+ 등 사실상 모든 최신 브라우저가 대상입니다.
다만 인터넷 익스플로러 11은 WOFF2를 지원하지 않습니다(WOFF 1.0까지만). 아주 오래된 환경까지 챙겨야 한다면 @font-face에서 WOFF2를 먼저 두고 WOFF를 폴백으로 함께 선언합니다.
@font-face {
font-family: "MyFont";
/* 최신 브라우저는 위(woff2)를, 못 읽으면 아래(woff)를 사용 */
src: url("/fonts/MyFont.woff2") format("woff2"),
url("/fonts/MyFont.woff") format("woff");
font-display: swap; /* 폰트 로딩 중 기본 글꼴로 먼저 보여줌 */
}대부분의 최신 사이트는 WOFF2 하나만 선언해도 충분합니다. IE 지원이 필요 없다면 WOFF 폴백도 생략할 수 있습니다.
자주 묻는 질문 (FAQ)
Q. TTF·OTF를 그대로 웹에 써도 되나요?
동작은 합니다. 다만 압축이 안 된 원본이라 파일이 커서 로딩이 느립니다. 웹에는 WOFF2를 쓰는 편이 좋습니다.
Q. WOFF2로 바꾸면 글자가 더 예뻐지나요?
아니요. WOFF2는 압축 컨테이너라 글자 모양·화질은 그대로입니다. 달라지는 건 파일 크기와 로딩 속도뿐입니다.
Q. TTF/OTF를 WOFF2로 어떻게 바꾸나요?
구글의 woff2 변환 도구나 폰트 최적화 서비스(예: fontTools의 woff2 기능)로 변환합니다. 웹폰트 제공 서비스를 쓰면 이미 WOFF2로 나옵니다.
마무리
핵심만 다시 정리하면, TTF·OTF는 데스크톱용(외곽선 방식만 다를 뿐 둘 다 비압축), WOFF2는 그 폰트를 Brotli로 압축해 웹에 최적화한 컨테이너입니다. 웹에는 파일이 가장 작아 로딩이 빠른 WOFF2를 쓰되, 아주 오래된 브라우저까지 챙긴다면 WOFF 폴백을 함께 선언하면 됩니다. WOFF2가 화질을 바꾸는 건 아니라는 점만 기억하세요.
📚 참고 출처 (2026년 7월 27일 확인)
· W3C — WOFF File Format 2.0
· web.dev — Reduce web font size
· caniuse — WOFF2
· Microsoft — OpenType font file spec
이미지: Unsplash · getsnapfont.com
COMMENTS