웹 폰트 포맷의 종류와 그 특징들
웹 디자인과 개발에서 폰트는 매우 중요한 요소입니다.
텍스트가 웹 사이트의 주된 내용 전달 수단이기 때문에 폰트의 선택과 최적화는 사용자 경험에 큰 영향을 미칩니다.
다양한 폰트 파일 형식 중에서 우리는 주로 EOF, TTF/OTF, WOFF, WOFF2를 사용합니다.
각 포맷은 저마다의 장단점을 가지고 있으며, 용도에 따라 적절히 선택하는 것이 중요합니다.
EOF (Embedded OpenType)
EOF는 Embedded OpenType의 약자로, 마이크로소프트가 개발한 폰트 파일 형식입니다.
이 포맷은 주로 인터넷 익스플로러에서 사용되었으며, 폰트 파일을 웹 페이지에 포함시키는 데에 주로 사용되었습니다.
EOF는 뛰어난 호환성을 자랑하지만, 파일 크기가 커서 웹 페이지의 로딩 속도에 부정적인 영향을 미칠 수 있습니다.
요즘에는 다른 폰트 포맷이 더 많이 사용되고 있지만, 오래된 브라우저 호환성을 고려해야 하는 경우 적용을 고려해 볼 수 있습니다.
TTF/OTF (TrueType/OpenType Font)
TTF와 OTF는 각각 TrueType Font와 OpenType Font의 약자입니다.
TTF는 애플과 마이크로소프트가 공동 개발한 폰트 포맷으로, 글꼴의 기본적인 모양을 정의합니다.
OTF는 Adobe와 마이크로소프트가 개발한 포맷으로, TTF의 기능을 확장하여 더 많은 타이포그래피 기능과 뛰어난 호환성을 제공합니다.
두 포맷 모두 높은 품질의 텍스트 렌더링을 지원하며, 다양한 디지털 플랫폼에서 사용됩니다.
파일 크기가 상대적으로 크기 때문에 웹에서 직접 사용하는 경우 로딩 시간이 길어질 수 있습니다.
WOFF (Web Open Font Format)
WOFF는 Web Open Font Format의 약자로, 웹에서 폰트를 전송하고 사용하기 위해 특별히 개발된 포맷입니다.
WOFF는 TTF와 OTF 파일을 기반으로 하며, 압축되어 파일 크기를 줄임으로써 웹 페이지의 로딩 속도를 향상시킵니다.
또한, 메타데이터를 포함할 수 있어 폰트의 저작권 정보를 포함시키는 것이 가능합니다.
WOFF는 대부분의 최신 브라우저에서 지원되며, 웹 폰트의 표준으로 자리잡고 있습니다.
TTF/OTF보다 로딩 속도가 빠르고, 폰트 품질을 유지하는 데에도 효과적입니다.
WOFF2 (Web Open Font Format 2)
WOFF2는 WOFF의 후속 버전으로, 더욱 향상된 압축 알고리즘을 사용하여 파일 크기를 더욱 줄였습니다.
이는 웹 페이지의 로딩 시간을 크게 단축시켜 사용자 경험을 개선하는 데 도움을 줍니다.
WOFF2는 WOFF보다 최대 30% 더 작은 파일 크기를 제공하며, 대부분의 최신 브라우저에서 지원됩니다. 특히 모바일 환경에서 WOFF2는 매우 유용한데, 제한된 네트워크 속도와 데이터 사용량을 고려해야 하기 때문입니다.
WOFF2는 현재 웹 폰트 포맷 중 가장 효율적인 선택으로 여겨지고 있습니다.
주의할 점
위에서 살펴본 바와 같이 각 폰트 포맷은 저마다의 특성과 장단점을 가지고 있습니다.
EOF는 오래된 브라우저 호환성을, TTF/OTF는 높은 품질의 텍스트 렌더링을, WOFF는 적절한 파일 크기와 메타데이터 포함 기능을, WOFF2는 최적의 압축률을 제공합니다.
폰트 포맷별로 정리해보자면 EOF > TTF/OTF > WOFF > WOFF2 순으로 파일 크기가 줄어듭니다.
한 가지 주의할 점은 WOFF와 WOFF2는 브라우저 호환성 문제가 존재할 수 있으므로, 이에 대응하기 위해 @font-face 규칙을 사용하여 다양한 폰트 파일을 함께 적용하는 것이 좋습니다.
@font-face {
font-family: 'CustomFont';
src: url('fonts/CustomFont.woff2') format('woff2'),
url('fonts/CustomFont.woff') format('woff'),
url('fonts/CustomFont.otf') format('opentype'),
url('fonts/CustomFont.ttf') format('truetype'),
url('fonts/CustomFont.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}