스타일이 지정되지 않은 텍스트 플래시(FOUT) 물리치기

캐시 없이 내 개인 사이트를 로드했을 때 내 텍스트가 올바른 글꼴 없이 먼저 표시되는 것을 알았습니다. 결국 모든 것이 로드된 후 원래 글꼴을 사용하여 스타일이 변경됩니다.



원래 글꼴을 로드하기 위해 typeface-roboto라는 NPM 패키지를 사용하고 있었습니다. CDN에서 가져오는 대신 글꼴을 직접 호스팅하고 싶었기 때문에 이것은 굉장했습니다. 패키지에 포함된 스타일이 FOUT(Flash of Unstyled Text)의 이유라는 것을 깨달았습니다.

패키지 내부의 코드를 살펴보고 CSS 파일을 확인했습니다. 다음은 글꼴을 추가하는 방법의 예입니다.

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap; /* Line Causing FOUT */
  font-weight: 500;
  src:
    local('Roboto Medium '),
    local('Roboto-Medium'),
    url('/fonts/roboto-latin-500.woff2') format('woff2'),
    url('/fonts/roboto-latin-500.woff') format('woff');
}

@font-face 스타일이 font-display: swap; 를 사용하고 있음을 확인했습니다. swap가 설정되면 브라우저는 폴백을 사용하기 전에 글꼴을 로드할 수 있는 매우 짧은 시간을 제공합니다. 글꼴이 완전히 로드되면 예상 글꼴로 다시 변환됩니다. 이 옵션은 성능 관점에서 보면 훌륭하지만 사용자 경험에 영향을 미칠 수 있습니다. font-display: block 를 설정하면 브라우저가 페이지에 항목을 표시하기 전에 글꼴을 가져와야 하는 시간이 늘어납니다. block는 사용자 경험을 위해 성능을 희생합니다.

내 솔루션

NPM 패키지를 사용하는 대신 모든 글꼴 파일을 내 프로젝트로 가져왔습니다. 그런 다음 CSS 내에서 font-display: block를 사용하여 글꼴을 로드했습니다.

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: block; /* No longer causing FOUT */
  font-weight: 500;
  src:
    local('Roboto Medium '),
    local('Roboto-Medium'),
    url('/fonts/roboto-latin-500.woff2') format('woff2'),
    url('/fonts/roboto-latin-500.woff') format('woff');
}

내 웹 사이트 디자인은 타이포그래피에 중점을 둡니다. 어떤 것이 표시되기 전에 글꼴을 로드할 시간을 조금 더 주기 위해 일부 성능을 기꺼이 희생했습니다.

기술, 프로그래밍 및 재택 근무에 대한 임의 게시물을 보려면 저를 팔로우하세요.