[웹 성능 최적화] 폰트 경량화하는 방법 ( 폰트 용량 줄이는 법 )

웹 성능을 최적화하는 방법으로 다양한 방법이 있지만

그 중 간단한 방법을 뽑자면 바로 '폰트 경량화'입니다.

 

폰트 경량화는 2가지 종류로 나뉘는데요.

1)폰트 용량을 줄이는 방법과

2)잘 쓰지 않는 글자를 빼버리는 방법입니다.

 

2번의 방법은 한글과 같이 다양한 문자가 발생 가능한 언어에서만 사용가능하며

모든 언어에서 사용 가능하지는 않습니다.

따라서 이번 포스팅에서는 1번의 방법에 대해서 자세히 소개하겠습니다.

---

✔폰트 종류(용량별)

• WOFF2: 가장 성능이 좋은 폰트 ( WOFF보다 더 압축된 폰트 )
• WOFF: 기본적인 압축 폰트
• EOT / TTF : 압축이 되어 있지 않은 폰트

폰트 용량을 줄이는 방법으로는 다른 확장자의 파일을 사용하는 것입니다.

이 중에서도 woof2 파일이 가장 압축률이 좋아 파일 용량이 적습니다.

 

그렇다면 woof2를 사용하기 위해서는 어떻게 해야할까요?

이미 woof 파일이 있으시다면 아래 방법을 권장드립니다.

 

○ woof → woof2로 변환해주는 사이트

https://cloudconvert.com/

위의 select file을 누르고 woof 파일을 넣고 woof2를 선택해주시면 파일이 자동 변환되어 다운로드 됩니다.

 

 

해당 과정이 번거롭다면 이미 모든 확장자별로 변환되어

복사 붙여넣기만 하면 되는 폰트들도 있습니다. 다만 구글 폰트만 있으니 참고하시길 바랍니다.

아래의 사이트에서 접속하면 다양한 폰트들이 정리되어 있습니다.

 

○  google-webfonts-helper

https://gwfh.mranftl.com/fonts

원하는 폰트를 누르면 아래와 같이 코드들이 정리되어 있습니다.

전체 코드를 복사 한 뒤 필요한 부분만 사용하시면 될 것 같습니다.

 

 

또한 font-display : swap;을  넣음으로써도 성능 최적화를 할 수 있습니다.

해당 코드는 폰트가 불러오기 전이라도 텍스트를 불러올 수 있다면 먼저 화면에 띄어주고

그 후 폰트가 로딩되면 웹폰트를 적용하라는 의미를 갖는 코드입니다.

 

따라서 성능을 우선시한다면 이를 넣기를 추천드립니다.

아래와 같은 예시로 사용하시면 됩니다.

 

@font-face {
    font-family: 'normal';
    font-weight: 500;
    font-style: normal;
    src:url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.ttf') format("truetype");
    font-display: swap;
}

 

끝까지 읽어주셔서 감사합니다.