웹폰트가 로드되는 동안 텍스트가 계속 표시되는지 확인

글꼴은 로드 시간이 느린 대용량 파일인 경우가 많습니다. 일부 브라우저는 글꼴이 로드될 때까지 텍스트를 숨겨 보이지 않는 텍스트 플래시 (FOIT)가 발생합니다.

Lighthouse font-display 감사가 실패하는 경우

Lighthouse는 보이지 않는 텍스트를 플래시할 수 있는 글꼴 URL을 표시합니다.

Lighthouse의 웹폰트 로드 중에 텍스트가 계속 표시되는지 확인 감사 스크린샷

보이지 않는 텍스트가 표시되지 않도록 하는 방법

font-display API는 font-face 스타일 내에서 사용될 때 글꼴이 표시되는 방식을 나타냅니다. 다음 font-display 값은 맞춤 글꼴이 준비되지 않은 경우 브라우저에 시스템 글꼴을 사용하도록 지시합니다.

  • swap
  • optional
  • fallback

CSS 예

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

Google Fonts 예시

Google Fonts URL 끝에 &display=swap/&display=optional/&display=fallback 매개변수를 추가합니다.

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

지연된 글꼴로 인한 레이아웃 변경을 방지하는 방법

시스템 글꼴을 일시적으로 표시하면 FOIT가 스타일이 지정되지 않은 텍스트 (FOUT)로 대체됩니다. 이렇게 하면 콘텐츠를 더 빨리 렌더링하여 FCP 및 LCP가 개선되지만, 맞춤 글꼴이 임시 시스템 글꼴을 대체할 때 FOIT와 FOUT가 모두 CLS에 동일한 영향을 미칩니다.

글꼴 로드의 CLS 영향을 완화하려면 font-display: optional와 함께 미리 로드를 사용하면 됩니다. 하지만 미리 로드를 과도하게 사용하면 부하 측정항목에 부정적인 영향을 줄 수 있습니다. 글꼴 미리 로드로 인해 성능이 저하되지 않는지 확인하기 위해 A/B 테스트를 실행하는 것이 좋습니다.

스택별 안내

Drupal

테마에서 맞춤 글꼴을 정의할 때 @font-display를 지정합니다.

Magento

맞춤 글꼴을 정의할 때 @font-display을(를) 지정합니다.

리소스