구글 웹폰트에서 로컬폰트 적용

폰트 이슈

1. 첫 번째로 웹 figma 디자인을 바탕으로 폰트를 적용하였는데 figma와 미세한 굵기 차이가 있다.
   구글링을 해본 결과 “Spoqa Han Sans Neo” 를 웹폰트로 적용하였을 때 이런 사례들이 꽤 있어보여
   폰트를 다운받아 웹폰트로 적용해보고자 한다.
2. Lighthouse 진단 결과 웹폰트 부분에서 권장사항 점수가 떨어져있다.

---

Font 다운로드 받아 적용

@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("../assets/fonts/SpoqaHanSansNeo-Regular.ttf");
  font-weight: 400;
}

@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("../assets/fonts/SpoqaHanSansNeo-Medium.ttf");
  font-weight: 500;
}

@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("../assets/fonts/SpoqaHanSansNeo-Bold.ttf");
  font-weight: 700;
}

라이트하우스 이미지

???!!

권장사항은 챙겼지만 성능이 떨어졌다… 혹시 폰트 파일크기 때문인가 싶어 폰트 파일들을 확인해보니 사이즈가

ttf가 woff2에 비해 두 배 가량 사이즈가 컸다. 아직 woff2 와 ttf의 차이를 모르겠지만 woff2로 변경해보자

---

woff2 적용

@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("../assets/fonts/SpoqaHanSansNeo-Regular.woff2");
  font-weight: 400;
}

@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("../assets/fonts/SpoqaHanSansNeo-Medium.woff2");
  font-weight: 500;
}

@font-face {
  font-family: "Spoqa Han Sans Neo";
  src: url("../assets/fonts/SpoqaHanSansNeo-Bold.woff2");
  font-weight: 700;
}

woff2가 파일용량이 ttf보다 적어 적용을 하였음에도 수치상 차이가 없었다… 둘의 차이점은 마지막에 적어보기로 하고 일단 해결을 해보자.

위에 이미지를 보면 페이지를 로드 시킬 때 폰트도 같이 다운로드를 받는다.

public 폴더에 파일들은 webpack에 의해 번들링 되지 않고 그대로 build 폴더에 복사된다는 얘기가 생각났다.

폰트 폴더를 public 폴더로 이동시킨다면 개선되지 않을까???

301kb → 180kb로 40%로 정도 사이즈를 줄였다. 성공..!

하지만 lighthouse는 실행시킬 때마다 수치가 변하기 때문에 좋은 테스트 방법은 아닌 듯 하다.

---

TTF / OTF / WOFF 차이

홈페이지나 블로그 등 웹사이트에서 적용하는 폰트를 웹폰트라고 한다.

TTF와 OTF는 pc에 설치하여 사용하는 폰트이며 WOFF는 otf와 ttf를 압축하여 웹에서 사용할 수 있도록

만들어준 포맷이다.

로딩 순서는 파일 크기가 작은 순서이므로 woff2 > woff > ttf > eot 순서이다. 가장 작은 파일은 woff2 이지만 woff2 파일은 인터넷 익스플로어에서 작동하지 않습니다.