[기타] 22-06-16 폰트가 무겁다?

어제는 익스플로어의 마지막 날이었다. 삼가 고 브라우저의 명복을 액션 빔이다. 잘가라 익스플로어

---

 

이건 회사에서 우리 브랜드 홈페이지에서 있던 일이다.

 

어느날 개발에 올라간 페이지의 첫 페인팅 속도가 너무너무 느린 것 이다.

 

그래서 콘솔을 열고 네트워크탭을 열어 뭘 가져오는데 시간이 이렇게 걸리는지 알아보기로 했다.

 

NEXT로 만들어진 ssr페이지인데 왤케 느리징.. 하고 보니까

 

이게 왠걸! ttf확장자로 된 폰트가 3메가나 되는 것이다. 그리고 그걸 가지고 오는데 뭔 5초나 걸리네!

 

그래서 고민했다. 폰트의 크기를 줄여야한다. 그렇다면 어떻게 해야할까.

 

검색해보니 폰트의 확장자도 이미지처럼 ttf 하나뿐만 있는것이 아니었다. 

 

ttf, otf, woff, woff2 이처럼 다양한 확장자가 있었고, 각기 특징이 있었다.

 

TTF

트루 타입 폰트로 IE8은 TTF를 지원하지 않고, IE9부터 지원한다. 글꼴이 압축되지 않은 형태라 파일도 크다.

 

OTF

오픈 타입 폰트로 맥과 윈도우에서 사용가능하고 화면과 프린터 글꼴을 하나의 요소에 포함한 폰트. 이것도 압축되지 않아 

파일이 크다.

 

WOFF

웹 오픈폰트 포멧으로 주요 브라우저에서 지원하는 데이터를 압축한 글꼴이라 더 작은 사이즈를 갖는다.

 

WOFF2

woff의 업그레이드 버전, woff보다 평균 30%정도 더 작다. 하지만 지원하지 않는 브라우저가 있다.

 

 

이런 선택지가 있는 걸 알게됬으니 망설임없이 폰트를 변경하기로 했다. 우리 페이지는 현재 사용하는 폰트보다 가벼운 woff타입의 폰트를 사용하기로 결정했다. 페이지의 성능을 높이기위해서 폰트의 크기를 줄일 필요가 있었기 때문이다.

 

근데 또 문제가 있었다. NEXT에 woff 폰트를 적용하려고 하니 TTF타입의 폰트를 적용할 때랑 좀 달랐다. ttf 타입의 폰트는 less파일에서 font-family로 등록해두면 되었었는데, woff타입의 폰트를 적용시키려고 하니 next가 폰트파일을 찾지 못하는 버그가 발생했다. 

 

next에 폰트를 적용하는 방법에 대해 검색해보니 next-fonts라는 라이브러리를 사용하면 해결된다는 결론에 도달했다.

 

next.config.js파일에 라이브러리를 적용시키니 정상적으로 next가 폰트파일을 찾아왔고, 결과적으로 첫 페인팅이 5초 이상 걸리던 페이지가 평균 0.4초의 첫 페인팅 속도를 가지게 되었다. 

 

참조

https://medium.com/@aitareydesign/understanding-of-font-formats-ttf-otf-woff-eot-svg-e55e00a1ef2

Understanding of Font Formats: TTF, OTF, WOFF, EOT & SVG

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=dnepdrn&logNo=221595417600