[WEB 최적화] WebFont

폰트는 다른 리소스보다 다운로드하는데 용량을 많이 차지하거나 지연되고 브라우저는 리소스를 가져올 때까지 텍스트를 렌더링하지 못하도록 차단될 수 있다. 따라서 WebFont 로드를 최적화하는 방법은 중요하다.

preload로 미리 로딩

현재 페이지에서 사용할 리소스를 우선순위를 높게하여 빠르게 가져오게 한다.

<link rel="preload" as="font" crossorigin="crossorigin" type="font/woff2" href="myfont.woff2">

주의사항

as 속성을 사용하여 브라우저에게 해당 리소스의 유형을 알려줘야 한다.

font-display로 렌더링 지연 커스텀

preload를 사용함으로써 리소스를 반드시 가져오지만, 사용할 수 없는 텍스트를 렌더링할 때를 고려해야 한다. 그럴때 font-display를 사용하여 다운로드 여부 또는 다운로드 시기에 따라 글꼴을 렌더링하는 방법을 결정할 수 있다.

• swap
  swap 옵션은 우선 폴백 폰트로 글자를 렌더링하고, 웹 폰트 로딩이 완료되면 웹 폰트를 적용한다. 웹 폰트 로딩 여부와 관계없이 항상 텍스트가 보인다.

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

참고
[HTML] preload, preconnect, prefetch
Optimize WebFont loading and rendering
웹 폰트 사용과 최적화의 최근 동향