웹 폰트 파일 형식 정리

웹에서 폰트를 적용할 때 사용할 수 있는 파일 포맷은 다양합니다. 각각의 포맷은 지원 환경, 기능, 용량 등에 차이가 있으므로, 블로그나 서비스에 폰트를 적용할 때 특징을 이해하고 선택하는 것이 중요합니다.

주요 폰트 파일 형식

1. TTF (TrueType Font)

가장 오래되고 널리 쓰이는 폰트 포맷입니다. 데스크탑(Windows, macOS) 환경에서 기본 지원되며, 설치가 간편합니다.

장점: 범용성, 높은 호환성
단점: 웹에서 파일 용량이 크고, 일부 모바일(iOS) 환경에서는 적용이 잘 안 되는 경우가 있음

2. OTF (OpenType Font)

TTF의 업그레이드 버전으로, Adobe와 Microsoft가 공동 개발했습니다. 더 많은 글리프와 고급 타이포그래피 기능(예: 자동 대체 문자, 라이가처 등)을 지원합니다.

장점: TTF보다 확장성·기능성 우수
단점: 일부 구형 브라우저에서 완벽하게 지원되지 않을 수 있음

3. WOFF (Web Open Font Format)

웹 폰트 전용 포맷으로, TTF/OTF보다 용량이 작고, 대부분의 최신 브라우저에서 지원됩니다.

장점: 웹 최적화, 압축률 높음, 넓은 브라우저 지원
단점: 일부 구형 브라우저(iOS 5 이하)에서는 지원되지 않음

4. WOFF2

WOFF의 차세대 버전으로, 더 높은 압축률과 빠른 로딩 속도를 제공합니다. 최신 브라우저와 모바일에서 적극적으로 지원됩니다.

장점: 최상의 압축률, 최신 환경 지원
단점: 구형 브라우저에서는 미지원

5. EOT (Embedded OpenType)

마이크로소프트가 만든 웹 전용 포맷으로, 주로 옛날 IE에서 사용됩니다. 현재는 거의 사용하지 않습니다.

장점: IE6~8에서만 지원
단점: 다른 브라우저와 모바일에서는 미지원

6. SVG Font

SVG 벡터 기반 폰트로, 주로 아이콘 폰트에 사용됩니다. 모바일(iOS) 환경 등에서는 지원이 제한적입니다.

장점: 벡터 기반, 아이콘 제작에 적합
단점: 폰트 용도에는 한계, 모바일 지원 미흡

iPhone에서 TTF가 적용되지 않은 경험과 해결법

저는 블로그에 TTF 폰트를 적용했는데, 데스크탑(윈도우, 맥)과 안드로이드에서는 정상적으로 보이지만, iPhone 12 Pro(사파리, 크롬 등 iOS 브라우저)에서는 TTF 폰트가 아예 적용되지 않는 문제를 겪었습니다.

WOFF2로 해결!

TTF 대신 WOFF2 포맷을 적용했더니, iPhone을 포함한 모든 환경에서 폰트가 정상적으로 표시되었습니다. 따라서 웹폰트 적용 시에는 WOFF2를 반드시 포함하는 것이 좋습니다.

Font 적용 예시 코드

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

TIP

여러 포맷을 함께 명시하면, 각 브라우저와 디바이스에서 지원하는 포맷이 자동으로 적용됩니다.

결론

TTF, OTF는 데스크탑 환경에서 문제 없지만, 모바일(iOS)에서는 제한이 있을 수 있음
WOFF, WOFF2는 웹에서 가장 넓은 지원과 높은 압축률로 추천
다양한 포맷을 함께 적용해 크로스 브라우저/디바이스 환경을 모두 커버하세요!