폰트 형식 변환

Font Converter

TTF·OTF와 WOFF를 브라우저 안에서 양방향 변환하고 알맞은 @font-face 규칙을 만듭니다. WOFF2는 Brotli가 필요해 다루지 않고 데스크톱 도구를 안내합니다.

sfnt 형식과 WOFF 1.0 사이를 양방향으로 변환하고, 어느 쪽으로 갈지는 놓은 파일을 보고 알아서 정합니다. 양방향 모두 손실이 없습니다. WOFF는 컨테이너라서 넣었다 빼면 같은 테이블이 그대로 나오고, `head.checkSumAdjustment`까지 다시 계산해 결과가 검증을 통과합니다. WOFF2는 거부하는데, 조용히 실패하는 대신 이유를 설명합니다.

🔒 브라우저 안에서만 처리fontconvertwoff2webfont

TTF · OTF → WOFF, 또는 WOFF → TTF · OTF

파일 하나를 놓으면 방향을 알아서 정합니다. 이 탭 안에서만 처리합니다.

되는 것과 안 되는 것

· TTF·OTF ⇄ WOFF 1.0: WOFF 규격(W3C, 2012)대로 테이블마다 zlib 압축을 걸고 44바이트 헤더와 디렉터리를 씁니다. 압축은 브라우저의 CompressionStream('deflate')이고, 풀 때는 원래 체크섬으로 sfnt를 다시 조립해 head.checkSumAdjustment까지 맞춥니다. 둘 다 손실이 없습니다.
· WOFF2는 만들 수도 풀 수도 없습니다. Brotli가 필요한데 웹 플랫폼은 페이지에 Brotli를 노출하지 않습니다. WOFF2가 꼭 필요하면 데스크톱 도구를 쓰세요. 보통 WOFF보다 20–30% 더 작습니다.
· TTF ⇄ OTF(CFF)처럼 외곽선 형식을 바꾸는 것은 변환이 아니라 재설계라 하지 않습니다. 확장자만 다를 뿐 안이 TrueType인 .otf는 그대로 다룹니다.
· 글꼴 파일의 라이선스(OS/2 fsType)는 변환해도 그대로입니다. 웹에 싣기 전에 배포 조건을 확인하세요.

용량을 줄이려면 형식 변환보다 서브셋이 훨씬 큽니다. 한글 글꼴은 2,350자로 자르면 90% 넘게 줄어듭니다.

사용 방법

파일 하나를 놓습니다
TTF나 OTF를 놓으면 WOFF로 묶고, WOFF를 놓으면 안의 외곽선 종류에 따라 TTF나 OTF로 풉니다. 방향 선택 버튼이 없는 이유는 처음 4바이트의 시그니처가 이미 방향을 말해 주기 때문입니다.
전후 크기를 확인합니다
WOFF로 갈 때 보통 40~50%가 줄어듭니다. 테이블마다 zlib를 거는 것뿐이고 특별한 것은 없습니다. 거의 줄지 않는다면 그 글꼴이 이미 압축된 데이터에 가깝다는 뜻입니다. charstring이 촘촘히 들어찬 CFF 글꼴 같은 경우입니다.
파일과 @font-face를 가져갑니다
선언은 파일이 스타일시트 옆에 있다고 가정합니다. 굵기와 기울기 값은 파일 이름에서 추측한 것이 아니라 글꼴의 OS/2와 post 테이블에서 읽은 것입니다.

자주 묻는 질문

WOFF2는 왜 안 되나요?

WOFF2는 Brotli 압축인 데다 글리프 테이블을 재배치하고 변환합니다. 웹 플랫폼이 페이지에 주는 `CompressionStream`에는 deflate와 gzip뿐이고 Brotli가 없어서, 브라우저에서는 양방향 모두 불가능합니다. 데스크톱에서는 fonttools(`pyftsubset --flavor=woff2`)나 `woff2_compress`가 해 주고, WOFF보다 20~30% 정도 더 줄어듭니다.

TTF를 진짜 OTF로 바꿀 수 있나요?

못 합니다. 정직한 도구라면 어느 것도 못 합니다. TrueType은 2차 곡선을, CFF는 3차 곡선을 씁니다. 그 사이를 오가는 것은 허용 오차를 두고 곡선을 다시 맞추는 일이고 외곽선이 바뀝니다. 변환이 아니라 글꼴을 다시 그리는 것입니다. 다만 안은 TrueType인데 확장자만 `.otf`인 흔한 경우는 그대로 처리합니다.

WOFF가 꼭 필요한가요, TTF로도 되나요?

서버가 gzip이나 brotli로 내려주는 TTF는 결국 WOFF와 비슷해지므로, 예전만큼 형식이 중요하지는 않습니다. 그래도 WOFF는 가질 만합니다. 서버가 압축하지 않아도 이미 압축돼 있고, 의미 있는 브라우저는 십 년 넘게 전부 지원해 왔습니다. 훨씬 큰 이득은 컨테이너가 아니라 서브셋 쪽입니다.