웹폰트 로딩 최적화

웹폰트 로딩이 느리면 화면에 기본 폰트가 깜빡 나타났다 바뀌는 FOUT(Flash of Unstyled Text) 현상이 발생

font-display: swap; 사용하여

@font-face {
  font-family: 'Pretendard';
  src: url('Pretendard.woff2') format('woff2');
  font-display: swap;
}
 

<link rel="preload">로  불러오기

<link rel="preload" href="/fonts/Pretendard.woff2" as="font" type="font/woff2" crossorigin="anonymous">

자주 쓰는 폰트는 CDN 말고 직접 호스팅하는 게 로딩 안정성에 더 좋음