웹폰트 로드 중에 텍스트가 계속 표시되도록 하기

글꼴은 로드하는 데 시간이 많이 걸리는 대용량 파일인 경우가 많습니다. 일부 브라우저는 글꼴이 로드될 때까지 텍스트를 숨기면서 보이지 않는 텍스트의 플래시(FOIT)를 일으킵니다.

# Lighthouse 글꼴 표시 감사가 실패하는 방식

Lighthouse는 보이지 않는 텍스트를 플래시시킬 수 있는 모든 글꼴 URL에 플래그를 지정합니다.

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

사용자 정의 글꼴이 로드되는 동안 보이지 않는 텍스트가 표시되지 않도록 하는 가장 쉬운 방법은 시스템 글꼴을 일시적으로 표시하는 것입니다. @font-face 스타일에 font-display: swap을 포함하면 대부분의 최신 브라우저에서 FOIT를 피할 수 있습니다.

@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;
}

글꼴 표시 API는 글꼴이 표시되는 방식을 지정합니다. swap은 글꼴을 사용하는 텍스트가 시스템 글꼴을 사용하여 즉시 표시되어야 함을 브라우저에 알립니다. 사용자 정의 글꼴이 준비되면 시스템 글꼴을 대체합니다. (자세한 내용은 로드 중 보이지 않는 텍스트의 표시 방지 게시물을 참조하세요.)

# 웹 글꼴 미리 로드

글꼴 파일을 더 일찍 가져오려면 <link rel="preload" as="font">를 사용하세요. 자세한 정보:

• 로딩 속도 향상을 위해 웹 글꼴 미리 로드(codelab)
• 선택적 글꼴을 미리 로드하여 레이아웃 이동 및 보이지 않는 텍스트의 플래시(FOIT) 방지

# Google 글꼴

Google 글꼴 URL 끝에 &display=swap 매개변수를 추가합니다.

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

# 브라우저 지원

모든 주요 브라우저가 font-display: swap을 지원하는 것은 아니므로 보이지 않는 텍스트 문제를 해결하기 위해 조금 더 많은 작업이 필요할 수도 있습니다.

# 스택별 지침

# Drupal

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

# Magento

사용자 정의 글꼴을 정의할 때 @font-display를 지정합니다.

# 리소스

• 웹폰트 로드 중에 텍스트가 계속 표시되도록 하기 감사에 대한 소스 코드
• 로딩 중 보이지 않는 텍스트 피하기
• 글꼴 표시로 글꼴 성능 제어
• 로딩 속도 향상을 위해 웹 글꼴 미리 로드(codelab)
• 선택적 글꼴을 미리 로드하여 레이아웃 이동 및 보이지 않는 텍스트의 플래시(FOIT) 방지