OTF, TTF, WOFF2 폰트 파일 포맷, 파일 목록 보는 순간 바로 읽는 법

폰트 공식 배포 페이지에 들어갔더니 .otf, .ttf, .woff2 세 개 파일이 나란히 있는 경험, 한 번쯤 있으시죠? "그냥 위에 있는 거 받으면 되겠지" 하고 TTF를 받았는데, 막상 웹사이트에 올리니 페이지가 눈에 띄게 느려진다거나 — 반대로 WOFF2를 받아서 영상 편집 툴에 넣으려다 파일 자체를 못 읽는 상황.

틀린 선택을 해도 글자가 완전히 깨지는 건 아니라서, 많은 분이 "어쩐지 이상한데?" 싶으면서도 넘어가게 됩니다. 그런데 포맷마다 압축 방식도 다르고 동작하는 환경도 다르거든요. 이 글에서 각 포맷의 스펙을 한 번만 해독해두면, 이후엔 파일 목록을 보는 순간 바로 무엇을 받아야 할지 판단할 수 있어요.

TTF와 OTF, 파일명만 보고 내부 구조를 읽는 법

두 포맷 모두 OS에 설치해서 쓰는 형식이라 "어차피 같은 거 아냐?"라고 생각하기 쉬운데, 내부 구조에 차이가 있어요.

TTF(TrueType Font)는 1980년대 후반 Apple과 Microsoft가 함께 개발한 형식입니다. 글자 윤곽을 2차 베지어 곡선으로 표현하고, Windows·macOS·Linux 전부에서 기본 인식됩니다. 한글 폰트가 처음 배포되던 시절부터 표준처럼 쓰여온 포맷이라 호환성 면에서는 가장 넓어요.

OTF(OpenType Font)는 1990년대 후반 Adobe와 Microsoft가 TTF를 기반으로 확장한 규격입니다. 내부 윤곽 표현에 3차 베지어 곡선(PostScript 방식)을 쓰는 경우가 많아서 복잡한 디자인의 서체는 OTF 파일이 TTF보다 약간 더 가볍게 나오기도 하고요. 예전에 "OTF가 합자·스몰캡 같은 고급 타이포그래피 기능을 더 잘 지원한다"는 말이 돌았는데, 이건 규격 자체의 차이가 아니라 전문 서체 제작사가 해당 기능을 OTF에만 넣어 배포하던 관행에서 비롯된 이야기예요.

실용적으로 정리하면: Adobe 계열 인쇄 작업엔 OTF가 더 잘 맞고, Windows 범용 문서 작업이나 영상 편집 툴 호환성을 우선할 땐 TTF가 무난합니다.

WOFF2가 그냥 WOFF보다 얼마나 더 작은지 수치로 읽기

WOFF(Web Open Font Format)는 2009년 Mozilla·Opera·Microsoft가 제안한 웹 전용 포맷이에요. TTF·OTF 데이터를 zlib(DEFLATE) 방식으로 압축해서 감싼 컨테이너라고 보면 됩니다. 브라우저에서 폰트를 더 빠르게 불러오도록 설계됐고, 파일 안에 라이선스 메타데이터도 담을 수 있어요.

WOFF2는 W3C가 2018년에 권고안을 확정한 차세대 규격입니다. 핵심 변경점은 압축 알고리즘을 zlib에서 Brotli(Google)로 바꾼 것. W3C 공식 평가 보고서에 따르면 WOFF2는 TrueType 계열 폰트에서 WOFF1보다 평균 27% 더 작고, PostScript 글리프 폰트에서는 13.5% 더 작습니다. Brotli가 텍스트 유사 데이터를 처리할 때 높은 압축률과 빠른 복원 속도를 동시에 내는 특성 덕분인데요.

실제 감각으로는, 200KB짜리 TTF 파일이 WOFF2로 변환되면 60~80KB대로 줄어드는 사례가 흔합니다. 페이지 로드 속도에 민감한 웹 프로젝트라면 이 차이가 상당하죠.

중요한 건 WOFF·WOFF2는 브라우저 전송 전용 포맷이라는 점이에요. 다운받은 .woff2를 Windows 폰트 설치 창에 드래그해도 인식이 안 됩니다. @font-face 선언의 src: url('font.woff2') format('woff2') 경로로 넣어야 브라우저가 불러와요.

파일 목록에 늘어선 포맷들, 각 항목이 알려주는 것

압축 방식, 브라우저 지원, OS 인식 가능 여부를 한 표에 펼쳐두면 파일 목록을 스캔하는 즉시 판단이 서요.

W3C WOFF2 스펙 기준으로 WOFF2가 TrueType 대비 27% 더 작다는 수치는, 위 표에서 실제 파일 크기 차이로 체감이 되시죠? EOT는 Microsoft가 2022년 IE를 공식 종료한 이후 사실상 사망 선고를 받은 포맷이라, 신규 프로젝트에서는 신경 쓸 필요가 없어요.

파일명에 'Variable' 또는 'VF'가 붙은 경우 따로 해독해야 하는 것

🔤 일반 폰트는 굵기마다 파일이 따로 존재합니다. Regular·Bold·Light·ExtraBold를 전부 쓰고 싶으면 파일을 네 번 요청해야 하는데, 한글 폰트는 한 벌 파일 크기 자체가 커서 이 부담이 적지 않아요.

가변폰트(Variable Font)는 OpenType 가변 테이블을 활용해 하나의 파일 안에 굵기·기울기 같은 변화 축(axis)을 연속값으로 담는 기술입니다. 예를 들어 Pretendard Variable 가변폰트 WOFF2 파일 하나로 font-weight: 100부터 900까지 전 범위를 커버할 수 있어요. CSS에서 font-weight: 100 900처럼 범위를 선언하면 브라우저가 단일 파일로 모든 굵기를 렌더링합니다.

정적 폰트 여러 벌 대신 가변폰트 하나를 쓰면 HTTP 요청 횟수와 총 전송량이 줄어서 로딩 속도에 확실히 유리합니다. Can I Use 기준 가변폰트는 2026년 기준 모던 브라우저에서 97% 이상의 지원율을 확보하고 있어서, 신규 프로젝트에서 적극 채택할 수 있는 수준이에요.

한 가지 헷갈릴 수 있는 게, 가변폰트는 포맷이 아니라 폰트 기술입니다. WOFF2가 가변폰트 데이터를 담기에 가장 적합한 컨테이너인 것이지, WOFF2라고 해서 모두 가변폰트인 건 아니에요. 파일 이름에 Variable 또는 VF가 붙거나 제작사 배포 페이지에서 명시적으로 안내하는 경우가 가변폰트라고 보면 됩니다.

내 용도가 파일 목록에서 어떤 포맷을 가리키는지 판독하기

용도를 먼저 확정하면 파일 목록에서 정답이 보입니다.

• ▸웹사이트에 @font-face로 적용 → WOFF2 (+ 구형 브라우저 대비 WOFF 폴백). 파일이 가장 작고 모던 브라우저 전체에서 동작해요
• ▸Windows·macOS·Linux에 폰트 설치 → TTF 또는 OTF. OS가 직접 인식하는 형식으로 받아야 해요
• ▸Adobe Illustrator·InDesign 인쇄 디자인 작업 → OTF. 전문 타이포그래피 기능 지원 + 서체 제작사 표준 배포 형식
• ▸Premiere Pro·After Effects 영상 편집 → TTF 또는 OTF. 영상 편집 툴은 WOFF2를 직접 불러오지 못하고, OS에 설치한 폰트를 씁니다
• ▸한 가지만 받아야 할 때 (범용) → TTF. OS 호환성이 가장 넓어요
• ▸웹 + OS 설치 모두 필요 → OTF(설치용) + WOFF2(웹용) 각각 받아서 용도별로 분리 사용
• ▸웹에서 여러 굵기를 효율적으로 → 가변폰트 WOFF2. 단일 파일로 모든 weight 범위 커버, 요청 횟수 절감

용도 하나를 확정하는 순간 파일 목록에서 받아야 할 포맷이 하나로 좁혀집니다. 다음에 배포 페이지를 열면 체크리스트 위에서부터 한 줄씩 내려오면 됩니다.

폰트비에서 포맷과 라이선스를 한 번에 확인하는 법

한국어 폰트를 찾을 때 은근히 번거로운 게 "이 폰트가 어떤 포맷으로 제공되는지, 내 용도에 허용되는지"를 폰트마다 따로 확인해야 한다는 점이에요.

폰트비(fontbee.waffle-gl.org)에서 폰트 이름을 검색하거나 AI 폰트 찾기(/find)를 쓰면, 폰트 상세 페이지에서 인쇄·웹사이트·영상·포장지·임베딩 등 사용 범위 허용 여부를 한눈에 파악할 수 있습니다. 웹폰트로 쓸 경우 @font-face 코드도 바로 복사할 수 있고, 포맷과 사용 범위를 따로 검색할 필요 없이 한 페이지에서 한번에 정리됩니다.

실제 파일은 폰트 제작사의 공식 배포처 링크를 통해 받는 구조라 라이선스 근거도 명확하고, 어떤 포맷이 제공되는지도 공식 출처에서 직접 확인할 수 있습니다.

참고자료

• W3C WOFF File Format 2.0 (w3.org/TR/WOFF2)
• W3C WOFF 2.0 Evaluation Report (w3.org/Fonts/WG/WOFF2ER)
• MDN Variable fonts guide (developer.mozilla.org)