CSS 폰트 네트워크 지연 문제 해결 방법

CSS 폰트 로딩 속도 문제

기존 폰트 삽입 코드

@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');

기존에는 특정 깃허브에서 @font-face CSS 텍스트를 import 하는 방식이었습니다.
그래서, 학교 등 네트워크가 느린 곳에서는 폰트 로딩에 2~3분이나 걸리는 이슈가 생겼습니다.

폰트 삽입 방식 변경

@font-face {
  font-family: 'GmarketSans';
  font-weight: 500;
  font-style: normal;
  src: url('../font/GmarketSansMedium.woff') format('woff');
  font-display: swap;
} 
@font-face {
  font-family: 'GmarketSans';
  font-weight: 800;
  font-style: normal;
  src: url('../font/GmarketSansBold.woff') format('woff');
  font-display: swap;
} 

폰트 CSS를 다운받아 webapp 폴더 하위의 font 폴더에 넣고, 공통 CSS 파일에 직접 CSS를 추가해주면 해결됩니다.