웹 폰트 포맷 가이드: TTF vs WOFF vs WOFF2
주요 폰트 포맷 개요
웹과 데스크탑에서 사용되는 주요 폰트 포맷을 알아봅니다.
TTF (TrueType Font) - Apple과 Microsoft가 1980년대에 공동 개발 - 데스크탑 운영체제의 표준 폰트 포맷 - 파일 크기가 크고 웹 최적화가 안 됨
OTF (OpenType Font) - Adobe와 Microsoft가 TTF를 발전시킨 포맷 - 고급 타이포그래피 기능(합자, 대안 글리프) 지원 - TTF와 마찬가지로 웹 최적화 미흡
WOFF (Web Open Font Format) - 웹 전용으로 설계된 첫 번째 표준 폰트 포맷 - TTF/OTF를 압축하여 약 40% 크기 절감 - 모든 현대 브라우저에서 지원
WOFF2 - WOFF의 개선판으로 Brotli 압축 사용 - WOFF보다 약 30% 추가 절감 - Chrome, Firefox, Safari, Edge 지원 (IE 제외)
파일 크기 비교
일반적인 폰트 패밀리 하나의 레귤러 weight 기준: - TTF: 100~300KB - WOFF: 60~180KB - WOFF2: 40~130KB
브라우저 지원
| 포맷 | Chrome | Firefox | Safari | Edge | IE |
|---|---|---|---|---|---|
| TTF | ✓ | ✓ | ✓ | ✓ | 9+ |
| WOFF | ✓ | ✓ | ✓ | ✓ | 9+ |
| WOFF2 | ✓ | ✓ | ✓ | ✓ | ✗ |
웹 개발 권장 설정
현대 웹에서는 WOFF2를 우선으로, WOFF를 폴백으로 사용합니다:
```css @font-face { font-family: 'MyFont'; src: url('font.woff2') format('woff2'), url('font.woff') format('woff'); font-display: swap; } ```
IE 지원이 필요하다면 TTF 폴백을 추가합니다.
언제 각 포맷이 필요한가요?
- 웹 사이트: WOFF2 (우선) + WOFF (폴백)
- 데스크탑 앱: TTF 또는 OTF
- Adobe 제품: OTF 권장
- iOS/macOS: TTF 또는 OTF
OBSCURA로 변환하기
OBSCURA에서 TTF ↔ WOFF2, TTF ↔ WOFF, OTF ↔ TTF 등 폰트 포맷 간 변환을 지원합니다. 웹 최적화를 위해 TTF를 WOFF2로 변환하는 경우가 가장 일반적입니다.