폰트 변환 (TTF ↔ WOFF2)

웹사이트 폰트가 무겁다면, TTF를 WOFF2로 줄여 쓰는 법

디자인할 때 쓰던 TTF·OTF 파일을 그대로 웹에 올리면 방문자가 무거운 글꼴 파일을 내려받느라 글자가 늦게 제 모양을 찾습니다. 이 도구는 폰트를 웹 표준 압축 형식인 WOFF2로 바꾸고, 반대로 WOFF2만 있는 폰트를 TTF·OTF로 되돌립니다. 변환은 브라우저 안에서 이루어져 폰트 파일이 서버로 올라가지 않습니다.

조금 더 자세히

WOFF2는 폰트를 웹으로 보내기 위해 압축한 형식이고, 압축을 풀면 원래 글리프와 힌팅 정보가 그대로 돌아오는 무손실 방식입니다. 이 도구는 구글이 공개한 woff2 압축 라이브러리를 웹어셈블리로 옮긴 엔진을 써서, 프로그램을 설치하지 않고도 브라우저에서 같은 변환을 합니다. 파일을 넣으면 앞 4바이트의 서명을 읽어 실제 형식을 판별하고 변환 방향을 알아서 맞추므로, 확장자가 잘못 붙어 있어도 내용 기준으로 처리됩니다.

한글 폰트는 현대 한글 완성형 11,172자를 담다 보니 영문 폰트보다 훨씬 크고, 그만큼 압축 효과도 크게 체감됩니다. 대신 변환 계산이 한 번에 실행되어 큰 파일은 수십 초 동안 화면이 멈춘 듯 보일 수 있습니다. 원래 크기, 변환 후 크기, 줄어든 비율은 완료 메시지에 그대로 표시됩니다. 이 도구는 형식만 바꾸고 글자를 빼는 서브셋 기능은 없으므로, 변환 뒤에도 수 MB라면 사이트에 쓰는 글자만 남기는 작업을 따로 검토해야 합니다.

이렇게 쓰세요

• 파일 선택을 누르거나 폰트 파일(TTF·OTF·WOFF2)을 상자에 끌어다 놓습니다. 한 번에 한 파일씩 처리합니다.
• 변환 방향이 파일 형식에 맞춰 자동으로 바뀝니다. TTF·OTF는 "TTF/OTF → WOFF2 (웹폰트 만들기)", WOFF2는 "WOFF2 → TTF/OTF (되돌리기)"가 선택됩니다.
• 변환하기를 누르면 결과 파일이 바로 내려받아지고 변환 전후 크기가 표시됩니다. WOFF2로 만들 때는 줄어든 비율도 함께 나옵니다.
• WOFF2를 만든 경우 아래에 나타나는 @font-face 코드를 CSS 복사로 가져가 사이트 스타일시트에 붙여 넣습니다.

이럴 때 유용해요

자주 막히는 지점

팁 실제로 쓰는 굵기마다 WOFF2를 따로 만들고 @font-face 블록도 굵기별로 나눠 font-weight를 적어 두면, 브라우저가 굵은 글씨를 흉내 내지 않고 진짜 Bold 파일을 씁니다.