글꼴 로드 중 보이지 않는 텍스트 방지

Katie Hempenius

Barry Pollard

Shorts가 중요한 이유

글꼴은 로드하는 데 시간이 걸리는 대용량 파일인 경우가 많습니다. 이 문제를 해결하기 위해 일부 브라우저는 글꼴이 로드될 때까지 텍스트를 숨깁니다('보이지 않는 텍스트 플래시').

최대 콘텐츠 렌더링 시간 (LCP)은 텍스트가 렌더링될 때까지 지연될 수 있습니다. 성능을 최적화 중인 경우 FOIT를 피하고 '스타일이 지정되지 않은 텍스트 플래시'(FOUT)를 생성하는 시스템 글꼴을 사용하여 사용자에게 콘텐츠를 즉시 표시하는 것이 좋습니다.

글꼴 표시를 위한 브라우저 기본값

다음은 일반 브라우저의 기본 글꼴 로드 동작입니다.

즉시 텍스트 표시

이 가이드에서는 가능한 한 빨리 텍스트를 표시하는 두 가지 방법을 설명합니다. 첫 번째 방법은 간단하고 브라우저를 잘 지원하는 것입니다. 두 번째 방법은 심층적이지만 더 많은 옵션을 제공할 수 있습니다. 웹사이트에 가장 적합한 선택은 요구사항에 따라 다릅니다.

옵션 1: font-display 사용

font-display는 글꼴 표시 전략을 지정하는 API입니다. swap는 이 글꼴을 사용하는 텍스트가 시스템 글꼴을 사용하여 즉시 표시되어야 한다고 브라우저에 알립니다. 맞춤 글꼴이 준비되면 시스템 글꼴이 교체됩니다.

/* Before */
@font-face {
  font-family: Helvetica;
}

/* After */
@font-face {
  font-family: Helvetica;
  font-display: swap;
}

모든 최신 브라우저라도 브라우저에서 font-display를 지원하지 않는 경우 브라우저는 글꼴 로드 기본 동작을 계속 따릅니다.

옵션 2: 맞춤 글꼴이 로드될 때까지 대기

좀 더 많은 작업을 하면 좀 더 맞춤화된 접근 방식을 고려할 수 있습니다.

이 접근 방식에는 다음과 같은 세 가지 부분이 있습니다.

• 초기에 맞춤 글꼴을 사용하지 않도록 CSS를 리팩터링하여 초기 페이지 로드 시 맞춤 글꼴을 사용하지 마세요. 이렇게 하면 브라우저가 시스템 글꼴을 사용하여 즉시 텍스트를 표시합니다.
• CSS Font Loading API를 사용하여 맞춤 글꼴 로드 시점을 감지합니다.
• 맞춤 글꼴을 사용하도록 페이지 스타일 지정을 업데이트합니다.

// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");

// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);

// Load the font
font.load();

// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
  // Update the CSS to use the fonts
});

이 작업은 FontFaceObserver 라이브러리를 사용하여 실행할 수도 있으며, 일부 API는 사용하기 더 쉽습니다.

따라서 글꼴을 로드할 때 여러 가지 사항을 추가로 고려할 수 있습니다. 예를 들어, 모든 글꼴은 한 번에 로드할 수 있으므로 각 글꼴이 로드될 때 여러 레이아웃을 피할 수 있습니다. 또는 사이트에서 연결 속도가 느린 사용자나 데이터 저장 옵션을 사용하는 사용자를 위해 글꼴을 로드하지 않도록 선택할 수 있습니다.

확인

Lighthouse를 실행하여 사이트에서 font-display: swap를 사용하여 텍스트를 표시하는지 확인합니다.

1. Control+Shift+J (Mac의 경우 Command+Option+J)를 눌러 DevTools를 엽니다.
2. Lighthouse 탭을 클릭합니다.
3. 카테고리 목록에서 실적 체크박스가 선택되어 있는지 확인합니다.
4. 보고서 생성 버튼을 클릭합니다.

웹폰트를 로드하는 동안 텍스트가 계속 표시되도록 합니다 감사가 통과되었는지 확인합니다.