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

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

Lighthouse 글꼴 표시 감사 실패 이유

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를 지정합니다.

자료