글꼴 권장사항

코어 웹 바이탈의 웹 글꼴을 최적화합니다.

Katie Hempenius
Katie Hempenius
X
Barry Pollard

이 도움말에서는 글꼴 성능 모범 사례에 대해 설명합니다. 웹 글꼴이 성능에 영향을 미치는 방법은 다양합니다.

이 도움말은 글꼴 로드, 글꼴 게재, 글꼴 렌더링의 세 섹션으로 구성되어 있습니다. 각 섹션에서는 글꼴 수명 주기의 특정 측면이 작동하는 방식을 설명하고 이에 상응하는 권장사항을 제공합니다.

글꼴 로드 중

글꼴은 일반적으로 중요한 리소스입니다. 글꼴이 없으면 사용자가 페이지 콘텐츠를 볼 수 없기 때문입니다. 따라서 글꼴 로드의 모범 사례는 일반적으로 글꼴이 최대한 빨리 로드되도록 하는 데 중점을 둡니다. 타사 사이트에서 로드된 글꼴은 특히 주의해야 합니다. 이러한 글꼴 파일을 다운로드하려면 별도의 연결 설정이 필요합니다.

페이지의 글꼴이 제때 요청되고 있는지 확실하지 않은 경우 Chrome DevTools의 네트워크 패널에 있는 타이밍 탭에서 자세한 내용을 확인하세요.

DevTools의 Timing 탭 스크린샷

@font-face 이해하기

글꼴 로드 권장사항을 살펴보기 전에 @font-face의 작동 방식과 이것이 글꼴 로드에 미치는 영향을 이해하는 것이 중요합니다.

@font-face 선언은 웹 글꼴 작업 시 필수적인 부분입니다. 이 클래스는 최소한 글꼴을 참조하는 데 사용할 이름을 선언하고 해당 글꼴 파일의 위치를 나타냅니다.

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

일반적인 오해는 @font-face 선언이 발생할 때 글꼴이 요청된다는 점입니다. 이는 사실이 아닙니다. @font-face 선언만으로는 글꼴 다운로드를 트리거하지 않습니다. 오히려 페이지에 사용되는 스타일 지정에서 참조하는 경우에만 글꼴이 다운로드됩니다. 예를 들면 다음과 같습니다.

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

h1 {
  font-family: "Open Sans"
}

즉, 위 예에서 Open Sans는 페이지에 <h1> 요소가 포함된 경우에만 다운로드됩니다.

따라서 글꼴 최적화를 고려할 때는 글꼴 파일 자체만큼이나 스타일시트도 고려해야 합니다. 스타일시트의 콘텐츠나 제공 항목을 변경하면 글꼴이 도착하는 시점에 상당한 영향을 미칠 수 있습니다. 마찬가지로 사용되지 않는 CSS를 제거하고 스타일시트를 분할하면 페이지에서 로드되는 글꼴의 수를 줄일 수 있습니다.

인라인 글꼴 선언

대부분의 사이트는 외부 스타일시트에 포함하는 것보다 기본 문서의 <head>에 글꼴 선언 및 기타 중요한 스타일을 인라인으로 지정하는 것이 좋습니다. 이렇게 하면 브라우저가 외부 스타일시트를 다운로드할 때까지 기다릴 필요가 없으므로 브라우저에서 글꼴 선언을 더 빨리 찾을 수 있습니다.

<head>
  <style>
    @font-face {
        font-family: "Open Sans";
        src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    }

    body {
        font-family: "Open Sans";
    }

    ...etc.

  </style>
</head>

중요한 CSS를 인라인 처리하는 것은 모든 사이트에서 달성할 수 없는 고급 기술이 될 수 있습니다. 성능상의 이점은 분명하지만, CSS(이상적으로는 중요한 CSS)만 올바르게 인라인 처리되고 추가 CSS가 렌더링을 차단하지 않는 방식으로 전달되도록 하려면 추가적인 프로세스와 빌드 도구가 필요합니다.

중요한 서드 파티 출처에 미리 연결

사이트가 서드 파티 사이트에서 글꼴을 로드하는 경우 preconnect 리소스 힌트를 사용하여 서드 파티 출처와의 조기 연결을 설정하는 것이 좋습니다. 리소스 힌트는 문서의 <head>에 삽입되어야 합니다. 아래 리소스 힌트는 글꼴 스타일시트를 로드하기 위한 연결을 설정합니다.

<head>
  <link rel="preconnect" href="https://fonts.com">
</head>

글꼴 파일을 다운로드하는 데 사용되는 연결을 미리 연결하려면 crossorigin 속성을 사용하는 별도의 preconnect 리소스 힌트를 추가합니다. 스타일시트와 달리 글꼴 파일은 CORS 연결을 통해 전송해야 합니다.

<head>
  <link rel="preconnect" href="https://fonts.com">
  <link rel="preconnect" href="https://fonts.com" crossorigin>
</head>

preconnect 리소스 힌트를 사용할 때는 글꼴 제공업체가 별도의 출처에서 스타일시트와 글꼴을 제공할 수도 있다는 점에 유의하세요. 예를 들어 Google Fonts에서 preconnect 리소스 힌트가 사용되는 방식은 다음과 같습니다.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>

preload를 사용하여 글꼴을 로드할 때 주의하기

preload는 페이지 로드 프로세스 초기에 글꼴을 검색할 수 있도록 하는 데 매우 효과적이지만, 이 경우 다른 리소스를 로드할 때 브라우저 리소스를 사용하지 않아도 됩니다.

글꼴 선언을 인라인하고 스타일시트를 조정하는 것이 더 효과적일 수 있습니다. 이러한 조정은 단순한 해결 방법을 제공하기보다는 최근에 발견된 글꼴의 근본 원인을 해결하는 데 더 가까워집니다.

또한 preload를 글꼴 로드 전략으로 사용하는 것도 신중하게 사용해야 합니다. 브라우저에 내장된 일부 콘텐츠 협상 전략을 우회하기 때문입니다. 예를 들어 preload는 unicode-range 선언을 무시하며, 신중하게 사용할 경우 단일 글꼴 형식을 로드하는 데만 사용해야 합니다.

그러나 외부 스타일시트를 사용할 때는 브라우저에서 글꼴 필요 여부를 아직 찾지 못하기 때문에 가장 중요한 글꼴을 미리 로드하는 것이 매우 효과적일 수 있습니다.

글꼴 전송

글꼴 전달이 빨라지면 텍스트 렌더링이 빨라집니다. 또한 글꼴을 충분히 일찍 제공하면 글꼴 교환으로 인한 레이아웃 변경을 없앨 수 있습니다.

자체 호스팅 글꼴 사용

이론적으로 자체 호스팅 글꼴을 사용하면 서드 파티 연결 설정이 필요 없으므로 더 나은 성능을 제공하게 됩니다. 하지만 실제로 이 두 옵션 간의 성능 차이는 명확하게 드러나지 않습니다. 예를 들어 Web Almanac에 따르면 타사 글꼴을 사용하는 사이트가 자사 글꼴을 사용하는 글꼴보다 렌더링 속도가 더 빠릅니다.

자체 호스팅 글꼴을 사용하려면 사이트에서 콘텐츠 전송 네트워크 (CDN) 및 HTTP/2를 사용하는지 확인하세요. 이러한 기술을 사용하지 않으면 자체 호스팅 글꼴이 더 나은 성능을 제공할 가능성이 크게 줄어듭니다. 자세한 내용은 콘텐츠 전송 네트워크를 참조하세요.

자체 호스팅 글꼴을 사용하는 경우 서드 파티 글꼴 제공업체가 일반적으로 자동으로 제공하는 글꼴 파일 최적화 중 일부(예: 글꼴 하위 설정 및 WOFF2 압축)도 적용하는 것이 좋습니다. 이러한 최적화를 적용하는 데 필요한 작업량은 사이트에서 지원하는 언어에 따라 다소 차이가 있을 수 있습니다. 특히 CJK 언어의 글꼴을 최적화하는 것은 특히 어려울 수 있습니다.

WOFF2 사용

최신 글꼴 글꼴 중 WOFF2는 가장 최신 글꼴로, 가장 광범위한 브라우저 지원 기능과 최상의 압축 성능을 제공합니다. WOFF2는 Brotli를 사용하기 때문에 WOFF보다 30% 더 압축하므로 다운로드할 데이터가 적고 성능이 더 빨라집니다.

브라우저 지원을 감안할 때, 전문가들은 이제 WOFF2만 사용할 것을 권장합니다.

사실, WOFF2만 사용하고 나머지는 무시하세요.

이렇게 하면 CSS와 워크플로가 크게 간소화되고 실수로 두 번 또는 잘못된 글꼴을 다운로드하는 일을 방지할 수 있습니다. 이제 WOFF2가 어디에서나 지원됩니다. 따라서 매우 오래된 브라우저를 지원할 필요가 없다면 WOFF2를 사용하면 됩니다. 그럴 수 없다면 이전 브라우저에 웹 글꼴을 아예 제공하지 않는 것이 좋습니다. 탄탄한 대체 전략이 마련되어 있다면 이는 문제가 되지 않습니다. 이전 브라우저를 사용하는 방문자에게는 대체 글꼴만 표시됩니다.

브램 스타인, 2022년 웹 연감

하위 집합 글꼴

일반적으로 글꼴 파일에는 지원되는 다양한 문자에 대한 수많은 글리프가 포함되어 있습니다. 그러나 페이지에 모든 문자가 필요한 것은 아니며 글꼴을 서브세팅하여 글꼴 파일의 크기를 줄일 수 있습니다.

@font-face 선언의 unicode-range 설명자는 글꼴을 사용할 수 있는 문자를 브라우저에 알립니다.

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
    unicode-range: U+0025-00FF;
}

페이지에 유니코드 범위와 일치하는 문자가 하나 이상 포함되어 있으면 글꼴 파일이 다운로드됩니다. unicode-range는 일반적으로 페이지 콘텐츠에 사용되는 언어에 따라 다양한 글꼴 파일을 제공하는 데 사용됩니다.

unicode-range는 종종 하위 설정 기법과 함께 사용됩니다. 하위 집합 글꼴은 원본 글꼴 파일에 포함된 글리프의 작은 부분을 포함합니다. 예를 들어 사이트에서 모든 사용자에게 모든 문자를 제공하는 대신 라틴 문자와 키릴 문자에 대해 별도의 하위 집합 글꼴을 생성할 수 있습니다. 글꼴당 글리프 수는 매우 다양합니다. 라틴어 글꼴은 일반적으로 글꼴당 100~1,000개의 글리프이고, CJK 글꼴은 10,000자가 넘을 수 있습니다. 사용되지 않는 글리프를 삭제하면 글꼴의 파일 크기를 크게 줄일 수 있습니다.

일부 글꼴 제공업체는 서로 다른 하위 집합을 가진 다양한 버전의 글꼴 파일을 자동으로 제공할 수도 있습니다. 예를 들어 Google Fonts는 기본적으로 이 작업을 실행합니다.

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

자체 호스팅으로 전환하는 경우 이는 쉽게 놓치고 로컬에서 더 큰 글꼴 파일을 만들 수 있는 최적화입니다.

글꼴 제공업체가 허용하는 경우 API (Google Fonts는 text 매개변수를 제공하여 이 기능을 지원)를 통해 또는 글꼴 파일을 수동으로 수정한 다음 자체 호스팅을 통해 글꼴을 수동으로 서브세팅할 수도 있습니다. 글꼴 하위 집합을 생성하는 도구로는 subfont 및 glyphanger가 있습니다. 하지만 하위 설정 및 자체 호스팅을 허용하는 글꼴의 라이선스를 확인하세요.

더 적은 수의 웹 글꼴 사용

가장 빠른 글꼴은 애초에 요청하지 않는 글꼴입니다. 시스템 글꼴과 가변 글꼴은 사이트에서 사용되는 웹 글꼴의 수를 줄일 수 있는 두 가지 방법입니다.

시스템 글꼴은 사용자 기기의 사용자 인터페이스에서 사용하는 기본 글꼴입니다. 시스템 글꼴은 일반적으로 운영체제 및 버전에 따라 다릅니다. 글꼴이 이미 설치되어 있으므로 다운로드할 필요가 없습니다. 시스템 글꼴은 본문 텍스트에 특히 적합합니다.

CSS에서 시스템 글꼴을 사용하려면 system-ui를 글꼴 모음으로 나열합니다.

font-family: system-ui

가변 글꼴의 개념은 단일 가변 글꼴을 여러 글꼴 파일을 대체하는 용도로 사용할 수 있다는 것입니다. 가변 글꼴은 '기본' 글꼴 스타일을 정의하고 글꼴 조작을 위한 '축'을 제공하는 방식으로 작동합니다. 예를 들어 Weight 축이 있는 가변 글꼴을 사용하여 이전에는 밝은 글꼴, 일반 글꼴, 굵은 글꼴, 추가 굵은 글꼴에 별도의 글꼴이 필요했던 글자 지정을 구현할 수 있습니다.

모든 사용자가 가변 글꼴로 전환하는 것이 도움이 되는 것은 아닙니다. 가변 글꼴에는 여러 스타일이 포함되어 있으므로 일반적으로 하나의 스타일만 포함하는 개별 비가변 글꼴보다 파일 크기가 큽니다. 가변 글꼴을 사용할 때에서 가장 큰 개선 효과를 볼 수 있는 사이트는 다양한 글꼴 스타일과 두께를 사용하고 사용해야 하는 사이트입니다.

글꼴 렌더링

아직 로드되지 않은 웹 글꼴이 있을 때 브라우저는 딜레마에 직면하게 됩니다. 웹 글꼴이 도착할 때까지 텍스트 렌더링을 보류해야 할까요? 아니면 웹 글꼴이 도착할 때까지 텍스트를 대체 글꼴로 렌더링해야 하나요?

브라우저마다 이 시나리오를 처리하는 방법이 다릅니다. 기본적으로 Chromium 기반 및 Firefox 브라우저는 연결된 웹 글꼴이 로드되지 않은 경우 최대 3초 동안 텍스트 렌더링을 차단합니다. Safari에서 텍스트 렌더링을 무기한 차단합니다.

이 동작은 font-display 속성을 사용하여 구성할 수 있습니다. 이러한 선택은 상당한 영향을 미칠 수 있습니다. font-display가 LCP, FCP, 레이아웃 안정성에 영향을 미칠 수 있습니다.

적절한 font-display 전략 선택

font-display는 연결된 웹 글꼴이 로드되지 않았을 때 텍스트 렌더링을 어떻게 진행해야 하는지 브라우저에 알립니다. 글꼴별로 정의됩니다.

@font-face {
  font-family: Roboto, Sans-Serif
  src: url(/fonts/roboto.woff) format('woff'),
  font-display: swap;
}

font-display에 가능한 값은 5가지입니다.

값 차단 기간 스왑 기간
자동 브라우저에 따라 다름 브라우저에 따라 다름
차단 2~3초 무한
바꾸기 0밀리초 무한
대체 100ms 3초
선택사항 100ms 없음
  • 차단 기간: 차단 기간은 브라우저가 웹 글꼴을 요청할 때 시작됩니다. 차단 기간 동안 웹 글꼴을 사용할 수 없는 경우 글꼴이 보이지 않는 대체 글꼴로 렌더링되므로 텍스트가 사용자에게 표시되지 않습니다. 차단 기간이 끝날 때 글꼴을 사용할 수 없는 경우 대체 글꼴로 렌더링됩니다.
  • 스왑 기간: 스왑 기간은 차단 기간 이후에 발생합니다. 교체 기간 동안 웹 글꼴을 사용할 수 있게 되면 '교체'됩니다.

font-display 전략은 성능과 미적 측면의 절충에 대한 다양한 관점을 반영합니다. 따라서 개인의 선호도, 페이지와 브랜드에 대한 웹 글꼴의 중요성, 늦게 도착한 글꼴이 교체될 때 얼마나 불편할 수 있는지에 따라 다르기 때문에 권장되는 접근 방식을 제시하기가 어렵습니다.

대부분의 사이트에는 다음 세 가지 전략이 가장 적합합니다.

  • 성능이 최우선인 경우: font-display: optional를 사용합니다. 가장 '성능이 우수한' 접근 방식입니다. 텍스트 렌더링이 100ms 이하로 지연되고 글꼴 스왑과 관련된 레이아웃 변경이 없을 것입니다. 하지만 이 단점은 웹 글꼴이 늦게 도착하면 사용되지 않는다는 것입니다.

  • 텍스트를 빠르게 표시하는 것이 최우선이지만 여전히 웹 글꼴을 사용하고 싶은 경우: font-display: swap를 사용하되 레이아웃 변경이 발생하지 않도록 글꼴을 일찍 제공해야 합니다. 이 옵션의 단점은 글꼴이 늦게 도착할 때 시프트가 이상하게 느껴진다는 것입니다.

  • 텍스트가 웹 글꼴로 표시되도록 하는 것이 최우선 사항인 경우: font-display: block를 사용하되 텍스트 지연을 최소화하도록 글꼴을 일찍 제공해야 합니다. 단점은 초기 텍스트 표시가 지연된다는 것입니다. 이러한 재생에도 불구하고 텍스트가 실제로는 보이지 않게 그려지므로 여전히 레이아웃 변경을 일으킬 수 있으며, 따라서 대체 글꼴 공간이 공간을 예약하는 데 사용됩니다. 웹 글꼴이 로드되면 차이 공간이 필요할 수 있으므로 이동이 필요할 수 있습니다. 그러나 이 방법은 텍스트 자체가 이동하지 않는 것으로 보이므로 font-display: swap보다 시프트가 덜 거슬릴 수 있습니다.

또한 이 두 가지 접근 방식을 결합할 수 있습니다. 예를 들어 브랜딩과 시각적으로 구분되는 기타 페이지 요소에는 font-display: swap를 사용하고 본문 텍스트에 사용되는 글꼴에는 font-display: optional를 사용합니다.

대체 글꼴과 웹 글꼴 간의 이동 줄이기

CLS의 영향을 줄이려면 새로운 size-adjust 속성을 사용하면 됩니다. 자세한 내용은 CSS size-adjust에 관한 도움말을 참고하세요. 이 도구는 Google의 도구 집합에 새로 추가된 것이므로 지금은 더 고급스럽고 약간의 수동 작업이 필요합니다. 하지만 분명히 실험해 보고 향후 도구 개선사항을 지켜봐야 합니다.

결론

웹 글꼴은 여전히 성능 병목 현상이지만 웹 글꼴은 병목 현상을 가능한 한 줄일 수 있도록 최적화할 수 있는 옵션이 계속 늘어나고 있습니다.