웹폰트 질문드립니다.
| CMS/프레임워크 | WordPress |
|---|---|
| 개발 언어 | PHP 8.2 |
워드프레스 블로그 Pagespeed Insight를 돌려 보니까 웹폰트에서 점수가 조금 떨어지는 것을 확인했습니다.
그걸 고친다고 많이 나아지는 것은 없겠지만 조금이라도 더 개선해보고 싶은데요.
웹폰트를 지정하지 않고 폰트 패밀리에 사람들이 주로 깔려있을만한 나눔고딕 같은 것으로 하는게 좋을지
스포카 한 산스 같은 가벼운(제가 아는 웹폰트 중에서는) 것을 기본으로 하는게 더 좋을지 궁금합니다.
댓글 3
웹 폰트에서 점수가 떨어졌다고 하셨는데, 어떤 점 때문에 깎였는지는 적어놓지 않으셔서, 제가 사용한 최적화 방법을 알려드립니다.
1) 대체 글꼴을 보여주세요.
Google Fonts에 등록된 폰트라면 Swap을 지원합니다.
해당 폰트를 완전히 불러오기 전에, 대체 글꼴을 보여줄 지 설정할 수 있습니다.
특히나, 폰트 파일이 큰 경우에 다운로드 되기 전에 아무 글씨가 안 보이는 현상이 생길 수 있으니 반드시 설정해주세요.
Google Fonts에 등록하지 않은 폰트라면, 아래 URL을 참고하셔서 수정하세요.
https://mong-blog.tistory.com/entry/CSS-font-display-%EA%B8%80%EA%BC%B4-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%B0%A9%EC%8B%9D%EC%9D%84-%EB%B3%80%EA%B2%BD%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95
2) 서브셋을 지원하는 폰트라면, 해당 폰트를 사용하세요.
폰트 파일 하나의 크기는 대체로 아무리 작아도 수백KB에서 크면 1MB를 초과합니다.
그러나, 폰트에서 지원하는 글자를 모두 사용하는 경우는 매우 드뭅니다.
서브셋 폰트를 사용하면, 페이지에 포함된 폰트만 선택적으로 다운로드 할 수 있으니, 트래픽도 절약되고 접속 속도도 향상 됩니다.
3) 웹 폰트 파일에 Expires 헤더 명시하기
유효 기간이 너무 짧으면 Pagespeed Insight가 감점을 주기도 하더군요.
가능한 길게 주는 것을 강추합니다.
정성스런 답변 감사드립니다. 꾸벅~
그럼 가장 좋은 방법은 링크한 폰트도 서브셋 지원이던데
이걸로 웹폰트 지정하고 말씀하신 옵션을 같이 붙이는게 베스트일까요?
다만, 폰트 파일에 따라 지나치게 경량화되어서 흔히 말하는 외계어(뛣, 쉛 등의 글자)가 깨져보이는 경우가 있습니다.
이 경우만 유의하시면 됩니다.
3번은 외부 CDN을 사용할 경우 적용하는 게 불가능할 수 있습니다. 구글 폰트에서 가져와 사용하는 경우는 아마 사용할 필요가 없을 겁니다.