Development/Publishing

[CSS]웹 폰트 파일 형식 정리 - WOFF, WOFF2부터 TTF까지

madebydev 2025. 7. 17. 15:14

웹 개발을 하다 보면 다양한 폰트 파일 형식을 알게 됩니다.

특히 웹 폰트를 사용할 때 .woff, .woff2, .ttf 같은 확장자들이 헷갈리는 것 같아서 정리를 해보았습니다.

📝 웹 폰트 파일 형식의 종류

1. WOFF (Web Open Font Format)

  • 확장자: .woff
  • 출시 연도: 2009년
  • 압축률: 약 40% 압축
  • 지원 브라우저: IE 9+, Chrome 5+, Firefox 3.6+, Safari 5.1+

WOFF는 웹 전용으로 개발된 폰트 형식입니다.

기존 OpenType이나 TrueType 폰트를 압축하여 웹에서 빠르게 로딩할 수 있도록 만든 것이 특징입니다.

 

장점:

  • 파일 크기가 작아 로딩 속도가 빠름
  • 웹 전용으로 설계되어 보안성이 좋음
  • 대부분의 브라우저에서 지원

단점:

  • WOFF2에 비해 압축률이 낮음
  • 모바일 구형 브라우저에서 지원하지 않는 경우가 있음

2. WOFF2 (Web Open Font Format 2.0)

  • 확장자: .woff2
  • 출시 연도: 2014년
  • 압축률: 약 30% 추가 압축 (WOFF 대비)
  • 지원 브라우저: Chrome 36+, Firefox 39+, Safari 12+, Edge 14+

WOFF2는 WOFF의 후속 버전으로, 더 나은 압축률을 제공합니다.

 

장점:

  • WOFF보다 30% 더 작은 파일 크기
  • 더 빠른 로딩 속도
  • 향상된 압축 알고리즘 사용

단점:

  • 구형 브라우저에서 지원하지 않음
  • IE에서 완전히 지원하지 않음

3. TTF (TrueType Font)

  • 확장자: .ttf
  • 출시 연도: 1991년
  • 압축률: 압축 없음
  • 지원 브라우저: IE 9+, Chrome 4+, Firefox 3.5+, Safari 3.1+

TTF는 가장 오래된 폰트 형식 중 하나로, 데스크톱에서 주로 사용되던 형식입니다.

 

장점:

  • 거의 모든 브라우저에서 지원
  • 높은 호환성
  • 폰트 정보가 완전히 보존됨

단점:

  • 파일 크기가 큼
  • 웹에서 사용하기에는 비효율적

4. OTF (OpenType Font)

  • 확장자: .otf
  • 출시 연도: 1996년
  • 지원 브라우저: Chrome 4+, Firefox 3.5+, Safari 3.1+

OpenType은 Adobe와 Microsoft가 공동 개발한 폰트 형식입니다.

 

장점:

  • 고급 타이포그래피 기능 지원
  • 다양한 언어 지원
  • 벡터 기반으로 확대/축소 시 품질 유지

단점:

  • 파일 크기가 상대적으로 큼
  • 일부 구형 브라우저에서 지원하지 않음

5. EOT (Embedded OpenType)

  • 확장자: .eot
  • 출시 연도: 1997년
  • 지원 브라우저: IE 6-11

EOT는 Microsoft에서 개발한 웹 폰트 형식입니다.

장점:

  • 구형 IE에서 유일하게 지원하는 웹 폰트 형식
  • 압축 기능 제공

단점:

  • IE에서만 지원
  • 현재는 거의 사용하지 않음

📝 어떤 형식을 선택해야 할까?

권장하는 우선순위:

  1. WOFF2 - 최신 브라우저용
  2. WOFF - 중간 호환성
  3. TTF - 폴백용

CSS에서 사용 예시:

@font-face {
    font-family: 'MyWebFont';
    src: url('fonts/MyWebFont.woff2') format('woff2'),
         url('fonts/MyWebFont.woff') format('woff'),
         url('fonts/MyWebFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

 

이렇게 여러 형식을 함께 선언하면 브라우저가 지원하는 형식을 자동으로 선택하여 사용합니다.

📝 파일 크기 비교

같은 폰트 기준으로 파일 크기를 비교해보면:

  • TTF: 100KB
  • WOFF: 60KB (40% 압축)
  • WOFF2: 45KB (55% 압축)

이처럼 WOFF2가 가장 효율적인 것을 알 수 있습니다.

📝 브라우저 지원 현황 (2024년 기준)

형식 Chrome Firefox Safari Edge IE
WOFF2 ✅ ✅ ✅ ✅ ❌
WOFF ✅ ✅ ✅ ✅ 9+
TTF ✅ ✅ ✅ ✅ 9+
OTF ✅ ✅ ✅ ✅ ❌
EOT ❌ ❌ ❌ ❌ ✅

📝 최적화 팁

1. 필요한 글리프만 포함하기

한글 폰트의 경우 용량이 크므로, 실제로 사용하는 글자만 포함하여 서브셋을 만들어 사용하는 것이 좋습니다.

2. 폰트 로딩 전략

@font-face {
    font-family: 'MyWebFont';
    src: url('fonts/MyWebFont.woff2') format('woff2');
    font-display: swap; /* 폰트 로딩 최적화 */
}

3. 프리로드 사용

<link rel="preload" href="fonts/MyWebFont.woff2" as="font" type="font/woff2" crossorigin>

📚 정리

웹 폰트를 사용할 때는 WOFF2를 메인으로 하고, 호환성을 위해 WOFF와 TTF를 폴백으로 사용하는 것이 가장 좋은 방법입니다.

파일 크기와 로딩 속도를 고려하여 적절한 최적화 전략을 함께 사용하면 더 나은 웹 폰트 경험을 제공할 수 있습니다.

특히 한국어 웹사이트의 경우 폰트 파일이 상당히 클 수 있으므로, 서브셋 폰트 사용과 적절한 로딩 전략을 반드시 고려해야 합니다.