Browser - 웹 폰트 파일 형식
◆ 웹폰트 파일 형식(.eot, .woff2, .woff, .ttf, .svg)의 차이
웹폰트를 적용하다 보면 다음과 같이 여러 확장자를 함께 사용하는 경우를 자주 볼 수 있다.
@font-face {
font-family: "Custom Font";
src:
url("CustomFont.woff2") format("woff2"),
url("CustomFont.woff") format("woff"),
url("CustomFont.ttf") format("truetype");
}
처음에는
“왜 같은 폰트를 여러 개나 등록하지?”
라는 의문이 들 수 있다.
결론부터 말하면 모두 같은 폰트이지만 저장 방식과 지원하는 브라우저가 다르기 때문이다.
예를 들어 Noto Sans라는 폰트는 다음과 같이 여러 형식으로 존재할 수 있다.
NotoSans.eot
NotoSans.ttf
NotoSans.woff
NotoSans.woff2
NotoSans.svg
모두 같은 Glyph(글리프)를 가진 동일한 폰트이며, 차이는 저장 방식(포맷), 압축 방식, 그리고 지원하는 브라우저이다.
즉, TTF에는 있는데 WOFF2에는 없거나, WOFF2에는 있는데 WOFF에는 없는 Glyph가 존재하는 것은 아니다.
(단, 서로 다른 폰트이거나 버전이 다른 경우는 예외이다.)
◆ TTF (TrueType Font)
TTF는 가장 기본적인 폰트 파일 형식이다.
확장자 : .ttf
Windows와 macOS에서 가장 널리 사용되는 설치용 폰트이며, 웹에서도 사용할 수 있다.
src: url("CustomFont.ttf") format("truetype");
특징
- 가장 기본적인 폰트 형식
- 운영체제에서 많이 사용
- 대부분의 프로그램에서 지원
- 웹에서도 사용 가능
단점
- 압축되지 않아 파일 크기가 큰 편이다.
- 웹폰트로 사용하기에는 비효율적이다.
◆ WOFF (Web Open Font Format)
WOFF는 웹에서 사용하기 위해 만들어진 폰트 형식이다.
확장자 : .woff
TTF를 웹 환경에 맞게 압축한 형식이라고 생각하면 된다.
TTF
↓ 압축
WOFF
특징
- 웹 전용 포맷
- TTF보다 용량이 작다.
- 대부분의 브라우저에서 지원한다.
◆ WOFF2
WOFF2는 WOFF를 더욱 개선한 최신 웹폰트 형식이다.
확장자 : .woff2
WOFF보다 압축률이 더욱 높아 현재 가장 많이 사용된다.
TTF
↓
WOFF
↓
WOFF2
예를 들어
TTF : 1 MB
WOFF : 700 KB
WOFF2 : 500 KB
처럼 용량이 줄어드는 경우가 많다.
특징
- 가장 높은 압축률
- 다운로드 속도가 빠름
- 최신 브라우저 대부분 지원
- 현재 웹 표준으로 가장 많이 사용
◆ EOT (Embedded OpenType)
EOT는 Microsoft에서 만든 웹폰트 형식이다.
확장자 : .eot
Internet Explorer를 지원하기 위해 만들어졌다.
특징
- Internet Explorer 전용
- 현재는 거의 사용하지 않음
◆ SVG Font
SVG Font는 SVG 내부에 글리프를 저장하는 방식이다.
확장자 : .svg
과거 iOS Safari에서 사용되었지만 현재는 거의 사용되지 않는다.
특징
- 오래된 iOS 브라우저 지원
- 현재는 사실상 사용하지 않음
◆ 브라우저는 어떤 폰트를 사용할까?
@font-face에 여러 개의 폰트를 등록하면 브라우저는 위에서부터 차례대로 확인한다.
@font-face {
font-family: "Custom Font";
src:
url("CustomFont.woff2") format("woff2"),
url("CustomFont.woff") format("woff"),
url("CustomFont.ttf") format("truetype");
}
브라우저는 다음과 같은 순서로 동작한다.
WOFF2 지원?
│
├── YES
│ ▼
│ WOFF2 다운로드
│
└── NO
│
▼
WOFF 지원?
│
├── YES
│ ▼
│ WOFF 다운로드
│
└── NO
│
▼
TTF 지원?
│
▼
TTF 다운로드
즉, 브라우저는 자신이 지원하는 첫 번째 포맷만 다운로드한다.
예를 들어 최신 Chrome에서는 WOFF2만 다운로드하며, WOFF와 TTF는 다운로드하지 않는다.
◆ 브라우저별 웹폰트 지원
브라우저마다 지원하는 웹폰트 형식이 조금씩 다르다.
| 브라우저 | WOFF2 | WOFF | TTF / OTF | EOT (구형 IE) | SVG (구형 iOS) |
|---|---|---|---|---|---|
| Chrome (크롬) | ✅ | ✅ | ✅ | ❌ | ❌ (지원 중단) |
| Edge (엣지) | ✅ | ✅ | ✅ | ❌ | ❌ |
| Firefox (파이어폭스) | ✅ | ✅ | ✅ | ❌ | ❌ |
| Safari (사파리) | ✅ | ✅ | ✅ | ❌ | ❌ (지원 중단) |
| Internet Explorer 11 | ❌ | ✅ | ✅ (제한적) | ✅ | ❌ |
| Internet Explorer 8 이하 | ❌ | ❌ | ❌ | ✅ | ❌ |
따라서 브라우저는 자신의 환경에서 지원하는 첫 번째 포맷 하나만 선택하여 다운로드한다.
◆ 왜 여러 포맷을 함께 등록할까?
브라우저마다 지원하는 포맷이 다르기 때문이다.
예를 들어
@font-face {
font-family: "Custom Font";
src:
url("CustomFont.woff2") format("woff2"),
url("CustomFont.woff") format("woff"),
url("CustomFont.ttf") format("truetype");
}
최신 Chrome에서는
WOFF2 다운로드
만 수행하고,
Internet Explorer 11에서는
WOFF 다운로드
를 수행한다.
즉, 여러 개의 URL을 작성했다고 해서 모든 파일을 다운로드하는 것이 아니라, 브라우저가 자신이 지원하는 첫 번째 포맷만 다운로드한다.
◆ 현재는 어떤 포맷을 사용할까?
현재 대부분의 프로젝트에서는 다음과 같이 작성하면 충분하다.
@font-face {
font-family: "Custom Font";
src:
url("CustomFont.woff2") format("woff2"),
url("CustomFont.woff") format("woff");
}
그 이유는
- WOFF2는 최신 브라우저의 사실상 표준이다.
- WOFF는 WOFF2를 지원하지 않는 일부 구형 브라우저를 위한 백업 역할을 한다.
- TTF는 웹에서 사용할 수 있지만 용량이 크고 웹 전송에 최적화되어 있지 않다.
- EOT와 SVG는 현재 거의 사용하지 않는다.
댓글남기기