WOFF(Web Open Font Format, 웹 오픈 폰트 포맷)는 Mozilla가 개발한 웹 전용 폰트 파일 형식입니다. WOFF 파일은 압축된 TTF(TrueType Font)와 OTF(OpenType Font) 파일을 담을 수 있으며, 폰트의 라이선스 정보와 각종 메타데이터도 함께 포함합니다.
이 글에서 다루는 내용은 WOFF와 WOFF2 파일 모두에 적용됩니다.
WOFF 파일이란?
WOFF 파일은 ZIP 파일과 비슷하게 다른 파일들을 담는 일종의 컨테이너 역할을 합니다. 구체적으로는 TrueType Font(TTF)와 OpenType Font(OTF) 파일을 포함하는데, 이를 통해 웹 디자이너는 대부분의 컴퓨터에 기본 설치된 표준 글꼴 외에도 다양한 폰트를 웹 페이지에서 사용할 수 있습니다.
현재 WOFF는 더 발전된 WOFF2 형식으로 대부분 대체되었습니다. WOFF2는 개선된 압축 알고리즘을 적용해 원본 파일 크기를 추가로 30%까지 줄여줍니다. 덕분에 WOFF2 파일은 더 적은 대역폭을 사용하고 로딩 속도도 훨씬 빠릅니다. WOFF 파일의 확장자는 .woff이고, WOFF2 파일의 확장자는 .woff2입니다.
WOFF 파일은 어떻게 작동할까?
사실상 모든 웹 페이지는 CSS(Cascading Style Sheets)를 사용해 화면에 표시되는 HTML과 여러 요소들의 레이아웃을 정의합니다. 예를 들어 개발자는 CSS를 활용해 사용자 컴퓨터에 이미 설치되어 있는 폰트를 지정함으로써 웹 폰트를 변경할 수 있습니다. 하지만 PC나 브라우저가 해당 폰트를 지원하지 않으면, 페이지의 font stack 설정 방식에 따라 전혀 다른 폰트로 표시되거나 아예 로드되지 않을 수 있습니다.
이러한 문제를 피하려면 커스텀 폰트를 WOFF 파일로 만들어 웹 페이지의 다른 요소들과 함께 서버에 저장하면 됩니다. 그런 다음 디자이너는 CSS의 @font-face 속성으로 해당 WOFF 파일을 참조해 브라우저에서 폰트를 렌더링할 수 있습니다.
Google Chrome, Firefox, Microsoft Edge, Opera, Safari 등 주요 브라우저는 모두 WOFF 형식을 지원합니다. 다만 최신 버전으로 브라우저를 업데이트해야 할 수도 있습니다.
WOFF의 장점
WOFF 파일은 웹 개발자가 사용할 수 있는 폰트의 종류를 넓혀줄 뿐만 아니라, 여러 가지 실질적인 이점도 제공합니다.
- 압축 효율: WOFF 파일은 압축되어 있기 때문에 다른 폰트 파일 형식보다 로딩 속도가 빠릅니다.
- HTML·CSS 지원: 이미지 파일과 달리 WOFF 파일은 HTML과 CSS로 스타일을 자유롭게 조정할 수 있습니다.
- SEO 향상: 텍스트를 이미지로 처리하는 것보다 WOFF 폰트를 사용하는 것이 검색 엔진 최적화(SEO)에 훨씬 유리합니다.
- 최적화된 렌더링: WOFF 파일에는 문맥적 글자 형태(contextual forms)나 올드 스타일 숫자(old-style figures) 같은 타이포그래피 정보가 포함되어 있어, 어떤 기기에서든 최적의 렌더링 결과를 얻을 수 있습니다.
- 웹 접근성: WOFF 파일을 사용하면 텍스트를 음성으로 읽어줄 수 있어(텍스트 이미지는 불가능) 사이트 접근성이 크게 향상됩니다.
- 폰트 임베딩: 다른 언어의 문자를 포함한 폰트를 삽입할 수 있어 국제화(internationalization)에도 도움이 됩니다.
직접 WOFF 폰트 만들기
FontForge 같은 폰트 에디터를 사용하면 직접 폰트 세트를 디자인하고 WOFF 파일로 내보낼 수 있습니다. 또한 FontForge를 이용해 WOFF 파일을 TTF나 OTF 파일로 변환하는 것도 가능합니다. 만약 TTF나 OTF만 지원하는 다른 폰트 에디터를 선호한다면, sfnt2woff 도구를 활용해 폰트를 WOFF 파일로 변환할 수 있습니다.
참고로 Open Font Library와 Font Squirrel에는 상업적·비상업적 용도로 무료로 사용할 수 있는 WOFF 형식의 폰트가 수백 종류나 공개되어 있으니, 무료 웹 폰트를 찾고 있다면 먼저 확인해 보시길 추천합니다.