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

Katie Hempenius

Barry Pollard

왜 관심을 가져야 할까요?

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

최대 콘텐츠 페인트 (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. 보고서 생성 버튼을 클릭합니다.

웹폰트 로드 중에 텍스트가 계속 표시되는지 확인 감사를 통과했는지 확인합니다.