Skip to content

CSS:@font-face

Performance Tunning

Web font 로딩 속도 최적화 등... 요약하면 아래와 같다:

  • &display=swap 은 기본
  • preconnect 로 폰트 주소에 미리 연결
  • preload 로 우선순위 비동기 CSS Fetch
  • media="print" onload="this.media='all'" 추가
  • noscript 대응 포함
  • src 순서 적용 및 local 사용
  • unicode-range 사용하여 파일 분할

Preload vs Prefetch vs Priorities

언제, 무엇을 사용해야할까?

<link rel="preload">
현재 페이지서 사용될거라 확신이 드는 자원들은 preload하여라.
<link rel="prefetch">
미래의 여러 navigation boundaries에서 사용될거라 생각되는 자원들은 prefetch하라.

See also

Favorite site

References


  1. Web_font_usage_and_optimization_trends_-_NAVER_D2.pdf