⚠️ 카페24 사이트가 느릴 때, 폰트를 체크해보자 (AppleSDGothicNeo 폰트 사용시 주의사항)

카페24 작업을 하는데, 한글 폰트는 AppleSDGothicNeo를 사용하신다고 한다.

인터넷에서 AppleSDGothicNeo woff2를 다운받아 loacl에 올렸다.

그리고 여느때와 다름없이 font-face를 연결했다.

 

그런데 발생하는 이슈.

사이트 접속이 심각할 정도로 느려졌다.

 

---

사이트 속도 측정 사이트

https://pagespeed.web.dev/?hl=ko

PageSpeed Insights

 

체감이 아니라 실제 측정되는 속도도 엄청 느리다.

 

---

🚨 문제 코드

@font-face {
  font-family: "AppleSDGothicNeo";
  font-weight: 100;
  src: url("/moa/fonts/AppleSDGothicNeo/AppleSDGothicNeoT.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+AC00-D7A3, U+1100-11FF, U+3130-318F, U+0020;
}

 

@font-face {
  font-family: "Apple SD Gothic Neo";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  unicode-range: U+AC00-D7A3, U+1100-11FF, U+3130-318F, U+0020;
  src: local("Apple SD Gothic Neo UltraLight"),
    url("https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/200_AppleSDGothicNeo-UltraLight.woff2") format("woff2"),
    url("https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0/fonts/200_AppleSDGothicNeo-UltraLight.otf") format("opentype");
}

 

이렇게 두가지 방법을 모두 써보았지만 개선되지 않았다.

 

 

✅ 해결방법

한 개발자가 web font로써 만들어둔 라이브러리를 사용하니, 해결되었다.

 

https://pagespeed.web.dev/?hl=ko

PageSpeed Insights