TTF, WOFF, WOFF2, EOT 무슨 폰트 포맷을 사용할지 고민이라면...

TTF, WOFF, WOFF2, EOT

4가지 모두 폰트 포멧이다.

그러나 이들은 브라우저마다 지원에 차이가 있었으니.. (지끈)😐

svg 포맷도 있는 듯 하나 많이 사용하지 않으므로 본문에선 다루지 않겠다!

 

각 브라우저마다 지원되는 포맷에 대해 간단히 알아보자면 아래와 같다 ↓

구분	故익스플로러	크롬	파이어폭스	사파리	오페라
TTF	O	O	O	O	O
WOFF	O	O	O	O	O
WOFF2	X	O	O	X	O
EOT	O	X	X	X	X

 

하나하나 나름 역사가 있는데 짧게 정리하자면 다음과 같다!

 

TTF : PC에 설치하여 사용

WOFF : 웹에서 사용할 수 있도록 만든 포맷 (W3C권고)

WOFF2 : WOFF에서 좀더 가볍게 발전한 포맷

EOT : ie에서 사용하던 방식

 

가벼운 순서는 WOFF2 > WOFF > TTF > EOT 순이다.

* WOFF2는 ie에서 지원 하지 않는다.

 

 

나는 요즘 WOFF2, WOFF만 사용하는 편이다!

TTF는 웹 사용이 허용되지 않는 경우가 있다고 하니 저작권을 꼭 확인하자

 

@font-face{
    font-family:"NanumSquareNeo-eHv";
    src:url("/font/NanumSquareNeoTTF-eHv.woff2") format("woff2"),
        url("/font/NanumSquareNeoTTF-eHv.woff") format("font-woff"),
        url("/font/NanumSquareNeoTTF-eHv.ttf") format("truetype")
}