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

Published on Updated on

Translated to: English, Español, Português, Pусский

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

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

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

웹폰트 로드 중에 텍스트가 계속 표시되도록 하기 Lighthouse 감사의 스크린샷

See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

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

사용자 정의 글꼴이 로드되는 동안 보이지 않는 텍스트가 표시되지 않도록 하는 가장 쉬운 방법은 시스템 글꼴을 일시적으로 표시하는 것입니다. @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">를 사용하세요. 자세한 정보:

Google 글꼴

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

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

브라우저 지원

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

Codelab

모든 브라우저에서 FOIT를 피하는 방법을 알아보려면 보이지 않는 텍스트의 플래시 방지 codelab을 확인하세요.

스택별 지침

Drupal

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

Magento

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

리소스

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.