By aPOST in CSS — 2023년 12월 23일

[CSS] eot, woff, ttf 웹 글꼴 포맷의 구분과 이해

웹용으로 사용하는 글꼴은 다양한 글꼴 포맷이 있습니다.

종류별로 용도가 조금씩 다르고, 또 현재 시점에서는 전혀 무쓸모인 것도 있습니다.

웹 글꼴 중 TTF와 WOFF는 대부분의 웹 브라우저에서 지원되는 범용 포맷으로 자리잡았기 때문에 2가지 글꼴만 정의해주면 호환성에 문제는 없습니다.

CSS로 웹 글꼴을 정의해서 가져올 때는 다음과 같이 정의합니다.

"eot"와 "svg" 포맷은 호환성을 위해서 가져오는 것으로 실제로는 없어도 무방합니다.

@font-face {
  font-family: 'apost';
  src:  url('fonts/apost.eot?1wm9b1');
  src:  url('fonts/apost.eot?1wm9b1#iefix') format('embedded-opentype'),
    url('fonts/apost.ttf?1wm9b1') format('truetype'),
    url('fonts/apost.woff?1wm9b1') format('woff'),
    url('fonts/apost.svg?1wm9b1#apost') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

실제로는 다음과 같이 "ttf"와 "woff" 글꼴 2개만을 가져와 사용해도 됩니다.

@font-face {
	font-family: 'apost';
	src: url('./images/apost.ttf?1xk3lj') format('truetype'),
	  url('./images/apost.woff?1xk3lj') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

"src"가 2개인 것은 인터넷 익스플로러 호환성을 위한 것입니다.

웹브라우저에서 표현되는 웹 글꼴이 안티알리아싱이 적용되어 조금 더 보기좋게 보이도록 하려면 다음 2가지 속성을 CSS에 추가해야 합니다.

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

글꼴 포맷별로 다음과 같은 차이점이 있습니다.

TTF(True Type Font)

포스트스크립트 글꼴에 대응해서 애플과 마이크로소프트가 고안한 벡터 글꼴 포맷입니다. 윈도우와 맥 운영체제에서 가장 오랫동안 사용되어 온 글꼴 포맷입니다. 대부분의 웹 브라우저에서 웹 글꼴로 TTF를 지원합니다. 인터넷 익스플로러도 지원하기 때문에 호환성 문제가 없어 웹 글꼴로도 널리 사용되고 있습니다.

OTF(Open Type Font)

어도비와 마이크로소프트가 협력해서 만든 TTF의 개선판입니다. 화면용과 인쇄용 글꼴 정보가 하나의 글꼴 파일 안에 들어있어 더 보기좋은 화면 출력을 보장해줍니다. 때문에 웹에서 사용하기에도 적합합니다.

윈도우 운영체제 전용이나 다름없는 TTF와 달리 많은 운영체제제에서 지원되는 멀티 플랫폼을 지원하는 오픈 포맷입니다.

2바이트 문자를 지원해 65000자까지 글자를 저장할 수 있어 다양한 문자와 그래픽 표현을 하나의 글꼴 파일 안에 구현할 수 있습니다.

WOFF(Web Open Font Format)

웹에서 사용하는 글꼴 포맷을 위해 여러 회사들의 협업으로 제안되었으며, TTF와 함께 가장 널리 사용되는 웹 글꼴 포맷입니다.

대부분의 최신 웹 브라우저에서 지원되기 때문에 WOFF 글꼴만으로도 웹 글꼴을 표현하는데 아무런 문제가 없습니다.

기본적으로 OTF와 TTF에 메타데이터가 추가로 들어있는 구조를 채택하고 있으며, 메타데이터에는 라이센스 관련 데이터를 넣을 수 있어 저작권 표시와 같은 소유권 표시를 할 수 있습니다.

WOFF 포맷을 개선해 30% 정도 더 작은 글꼴 파일로 압축할 수 있도록 한 WOFF2가 제안되어 있지만 널리 사용되고 있지는 않습니다.

SVG(Scalable Vector Graphics font)

벡터 데이터를 저장하는 SVG를 활용한 글꼴 표현입니다.

SVG의 글리프 태그(<glyph>)를 활용해 벡터 도형을 사용해 글꼴을 구현합니다. 웹 글꼴을 표현하기 어려운 이용 환경에서 유사한 구현을 할 수 있습니다.

글꼴과 달리 힌팅이 지원되지 않아, 글꼴처럼 미려하게 안티알리아싱이 적용된 출력을 할 수 없습니다.

웹에서 표현할 때 다소 거칠게 출력되기 때문에 호환성 용도 외에는 추천하지 않는 글꼴 표현 방식입니다.

애플 사파리 브라우저에서만 제대로 지원되기 때문에 거의 사용되지 않으며, SVG 포맷이 XML 텍스트 파일 구조이기 때문에 바이너리 포맷인 다른 글꼴에 비해 파일 크기가 큰 단점이 있습니다.

EOT(Embedded Open Type)

마이크로소프트가 웹에서 사용하기 위해 제안한 글꼴 포맷입니다.

인터넷 익스플로러에서만 지원하며, 다른 웹 브라우저는 지원하지 않습니다. 현재는 사장되어 더 이상 사용되지 않으며, 인터넷 익스플로러 호환성을 위해서만 일부 제공됩니다.