글꼴 사용은 대부분의 웹 페이지에서 널리 퍼져 있으며 종종 오류가 포함됩니다. 이러한 오류 중 다수는 웹 성능 예산에 부정적인 영향을 미칩니다. 이 문서의 목적은 웹 글꼴 사용에 대한 정보를 제공하고 웹 성능을 향상시키는 데 도움이 되는 것입니다.
웹 페이지를 렌더링할 때 적용되는 계층 구조에서 볼 수 있듯이 글꼴 요소는 로드될 때까지 다른 요소의 렌더링을 지연시킬 수 있습니다. 이 지연을 적절하게 관리하는 것은 CLS(누적 레이아웃 전환)와 사용자 인식 모두에 중요합니다.
글꼴 로딩 문제
페이지의 글꼴이 로드될 때까지 HTML 및 CSS 렌더링 프로세스 중 글꼴 표시 여부는 브라우저마다 다릅니다. 다음은 다양한 브라우저가 이 상황을 처리하는 방법에 대한 요약입니다.
| Browser | 글꼴이 준비되지 않은 경우의 기본 동작… |
|---|---|
| Edge | 글꼴이 준비될 때까지 시스템 글꼴을 사용합니다. 글꼴을 교체합니다. |
| 크롬 | 최대 3초 동안 텍스트를 숨깁니다. 텍스트가 여전히 준비되지 않은 경우 글꼴이 준비될 때까지 시스템 글꼴을 사용합니다. 글꼴을 교체합니다. |
| 파이어 폭스 | 최대 3초 동안 텍스트를 숨깁니다. 텍스트가 여전히 준비되지 않은 경우 글꼴이 준비될 때까지 시스템 글꼴을 사용합니다. 글꼴을 교체합니다. |
| Safari | 글꼴이 준비될 때까지 텍스트를 숨깁니다. |
의존하지 않고 이 문제를 해결하려면 브라우저 동작에 대해, 글꼴 표시 매개변수가 도입되었습니다. 현재 브라우저의 92%가 글꼴 표시 매개변수를 지원합니다.
글꼴 표시는 무엇을 합니까?
페이지 로딩 과정에서 브라우저에 따라 글꼴이 완전히 로드될 때까지 글꼴 모양이 달라질 수 있습니다. 예를 들어, 일부 Safari 브라우저 버전에서는 글꼴이 로드될 때까지 텍스트를 숨깁니다. 그만큼 글꼴 표시: 교환 CSS 매개변수는 글꼴 파일이 로드될 때까지 시스템 글꼴을 사용하여 텍스트를 표시함으로써 이 동작을 표준화합니다. 글꼴이 로드되면 시스템 글꼴이 원하는 글꼴로 교체됩니다. 사용 예는 다음과 같습니다.
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}글꼴 미리 로드하기
사용 중요한 렌더링 경로 전에 글꼴을 로드하면 글꼴이 로드되는 동안 간격이 발생하는 것을 방지할 수 있습니다.
보너스: 글꼴 사용에 대한 업계 접근 방식
유사한 기술(SimilarTech) 데이터에 따르면, 인터넷 세계의 중요한 동향과 스냅샷을 살펴보겠습니다. 아래 첫 번째 그래프는 글꼴 사용을 보여줍니다. 상위 10,000페이지에, 두 번째 그래프는 상위 100,000개 사이트의 글꼴 사용량을 보여줍니다.. 먼저 다음 그래프를 살펴보겠습니다.
상위 5개 사이트와 상위 10,000개 사이트의 Google Font 및 Font Awesome 사용량에는 100,000%의 차이가 있습니다.. 이는 상위 10,000개 사이트가 글꼴 사용을 최적화했음을 나타냅니다. 주목할 만한 주제로 검토해 보시기를 권합니다. 자신만의 솔루션으로 웹 글꼴을 구현할 수 있는 방법을 고려해보세요.
보너스 2: Google Font 및 Font Awesome의 사용 통계
첫 번째 보너스에 관해 가장 많이 사용되는 글꼴 라이브러리의 수치 범위를 보여주는 두 그래프를 검토하는 것이 좋습니다. 이곳의 고유 도메인 수는 수백만 개가 넘습니다. 이 수백만 달러는 SEO 경쟁사를 나타냅니다.. 이러한 라이브러리를 다른 라이브러리보다 더 훌륭하고 최적으로 사용하면 눈에 띄는 데 도움이 될 수 있습니다.
이러한 팁을 따르고 글꼴 사용을 최적화하면 웹 성능과 사용자 경험을 크게 향상시킬 수 있습니다.
