WOFF와 WOFF2의 차이점

 

안녕하세요 찐망고입니다.

웹에서 쓰는 폰트 관련 글들이 조회수가 높더라고요..

제가 또 친절하게 설치파일과 웹폰트를 공유하기도 해서 그렇겠죠?

 

TTF 파일이나 OTF 파일은 로컬에 설치하는 글꼴 파일입니다.

반면에, 웹에서 사용하는 폰트는 WOFF(웹 오픈 폰트 형식)과 WOFF2 같은 파일 형식을 사용해요.

@font-face {
    font-family: 'SUITE';
    font-weight: 300;
    src: url('./SUITE-Light.woff2') format('woff2');
}

@font-face {
    font-family: "Pretendard";
    font-weight: 100;
    src: url(Pretendard-Thin.woff) format(woff);
}

 

위 코드는 웹에서 폰트를 불러오는 방법을 보여줍니다.

여기서 font-family는 폰트 이름을 지정하고, font-weight는 폰트 두께를 설정하며,

src는 실제 폰트 파일의 경로와 형식을 지정해요.

 

WOFF와 WOFF2는 웹에서 사용하기 위한 폰트 파일 형식이고,

둘 사이에는 몇 가지 중요한 차이점이 있는데요.

1. 압축률:
   • WOFF(Web Open Font Format): 기존 폰트 파일(TTF, OTF 등)을 압축한 형태. GZIP 알고리즘을 사용해서 압축률이 높지만, WOFF2에 비해 상대적으로 낮습니다.
   • WOFF2 (Web Open Font Format2) : WOFF2는 WOFF를 개선한 버전으로, 더 효율적인 브로틀리(Brotli) 압축 알고리즘을 사용합니다. 덕분에 WOFF에 비해 평균적으로 약 30% 정도 더 작은 파일 크기를 유지할 수 있죠. 이는 웹 페이지 로딩 속도에 긍정적인 영향을 주겠죠?!
2. 호환성:
   • WOFF: 대부분의 최신 브라우저에서 지원하며, Internet Explorer 9 이상에서도 사용할 수 있습니다.
   • WOFF2: 최신 브라우저에서는 거의 모두 지원하지만, Internet Explorer에서는 지원되지 않습니다.
     또한, 2015년 이전에 출시된 일부 오래된 브라우저에서는 지원하지 않을 수 있습니다.

 

 

요약하자면,

WOFF는 더 넓은 호환성을 가진 표준 파일 형식이고,
WOFF2는 WOFF보다 더 작은 파일 크기를 제공하는 새로운 형식을 뜻합니다.

최신 웹 프로젝트라면 WOFF2를 사용하는 게 좋지만, 호환성을 생각해야 한다면 WOFF를 함께 제공하는 게 이상적이겠죠?