Google은 AI 기술을 사용하여 콘텐츠를 사용자의 기본 언어로 번역합니다. AI 번역에는 오류가 있을 수 있습니다.

글꼴 권장사항

Core Web Vitals를 위한 웹 글꼴 최적화

Katie Hempenius

Barry Pollard

이 문서에서는 글꼴의 성능 권장사항을 설명합니다. 웹 글꼴은 다음과 같은 다양한 방식으로 성능에 영향을 미칩니다.

텍스트 렌더링 지연: 웹 글꼴이 로드되지 않은 경우 브라우저는 일반적으로 텍스트 렌더링을 지연합니다. 대부분의 경우 첫 콘텐츠 페인트 (FCP)가 지연됩니다. 일부 상황에서는 최대 콘텐츠 페인트 (LCP)가 지연됩니다.
레이아웃 이동: 글꼴 스와핑을 실행하면 레이아웃 이동이 발생하고 누적 레이아웃 이동 (CLS)에 영향을 미칠 수 있습니다. 이러한 레이아웃 변경은 웹 글꼴과 대체 글꼴이 페이지에서 차지하는 공간의 양이 다를 때 발생합니다.

이 문서에는 글꼴 로드, 글꼴 전달, 및 글꼴 렌더링의 세 섹션이 있습니다. 각 섹션에서는 글꼴 수명 주기의 특정 측면이 작동하는 방식을 설명하고 해당하는 권장사항을 제공합니다.

글꼴 로드

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

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

DevTools의 타이밍 탭

`@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 선언을 무시하며 신중하게 사용하면 단일 글꼴 형식을 로드하는 데만 사용해야 합니다.

그러나 외부 스타일시트를 사용하는 경우 브라우저가 글꼴이 필요한지 훨씬 나중에 발견하므로 가장 중요한 글꼴을 미리 로드하는 것이 매우 효과적일 수 있습니다.

글꼴 전달

글꼴 전달 속도가 빠를수록 텍스트 렌더링 속도가 빨라집니다. 또한 글꼴이 충분히 빨리 전달되면 글꼴 스와핑으로 인한 레이아웃 변경을 없애는 데 도움이 될 수 있습니다.

자체 호스팅 글꼴 사용

이론적으로 자체 호스팅 글꼴을 사용하면 서드 파티 연결 설정이 필요하지 않으므로 성능이 향상됩니다. 실제로 이러한 두 옵션 간의 성능 차이는 명확하지 않습니다. 예를 들어 웹 연감에서는 서드 파티 글꼴을 사용하는 사이트가 퍼스트 파티 글꼴을 사용하는 글꼴보다 렌더링 속도가 더 빠른 것으로 나타났습니다.

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

자체 호스팅 글꼴을 사용하는 경우 서드 파티 글꼴 제공업체가 일반적으로 자동으로 제공하는 글꼴 파일 최적화 중 일부를 적용하는 것이 좋습니다. 예를 들어 글꼴 하위 집합 및 WOFF2 압축이 있습니다. 이러한 최적화를 적용하는 데 필요한 노력의 양은 사이트에서 지원하는 언어에 따라 다릅니다. 특히 CJK 언어의 글꼴을 최적화하는 것은 매우 어려울 수 있습니다.

WOFF2 사용

최신 글꼴 중에서 WOFF2는 가장 최신이며 가장 광범위한 브라우저 지원을 제공하고 최고의 압축을 제공합니다. Brotli를 사용하므로 WOFF2는 WOFF보다 30% 더 잘 압축되어 다운로드할 데이터가 줄어들고 성능이 향상됩니다.

브라우저 지원을 고려할 때 전문가들은 이제 WOFF2만 사용하는 것이 좋습니다.

사실 이제 WOFF2만 사용하고 다른 모든 것은 잊어야 할 때라고 생각합니다.

이렇게 하면 CSS와 워크플로가 크게 간소화되고 실수로 글꼴이 두 번 다운로드되거나 잘못된 글꼴이 다운로드되는 것을 방지할 수 있습니다. 이제 WOFF2는 어디에서나 지원됩니다. 따라서 매우 오래된 브라우저를 지원해야 하는 경우가 아니라면 WOFF2만 사용하세요. 그럴 수 없다면 이러한 이전 브라우저에 웹 글꼴을 전혀 제공하지 않는 것이 좋습니다. 대체 전략이 강력하다면 문제가 되지 않습니다. 이전 브라우저의 방문자에게는 대체 글꼴이 표시됩니다.
2022 웹 연감의 브람 스타인

하위 집합 글꼴

글꼴 파일에는 일반적으로 지원하는 모든 다양한 문자에 대한 많은 글리프가 포함됩니다. 하지만 페이지에 모든 문자가 필요하지 않을 수 있으며 글꼴을 하위 집합으로 지정하여 글꼴 파일의 크기를 줄일 수 있습니다.

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

@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 축이 있는 가변 글꼴을 사용하여 이전에는 Light, Regular, Bold, Extra Bold에 별도의 글꼴이 필요했던 글자를 구현할 수 있습니다.

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

글꼴 렌더링

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

브라우저마다 이 시나리오를 다르게 처리합니다. 기본적으로 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에는 다섯 가지 가능한 값이 있습니다.

값	차단 기간	스와핑 기간
자동 모드	브라우저에 따라 다름	브라우저에 따라 다름
차단	2~3초	무한
스와핑	0ms	무한
대체	100ms	3초
선택사항	100ms	없음

차단 기간: 차단 기간은 브라우저가 웹 글꼴을 요청할 때 시작됩니다. 차단 기간 동안 웹 글꼴을 사용할 수 없는 경우 글꼴은 보이지 않는 대체 글꼴로 렌더링되므로 텍스트가 사용자에게 보이지 않습니다. 차단 기간이 끝날 때 글꼴을 사용할 수 없는 경우 대체 글꼴로 렌더링됩니다.
스와핑 기간: 스와핑 기간은 차단 기간 후에 발생합니다. 스와핑 기간 동안 웹 글꼴을 사용할 수 있게 되면 '스와핑'됩니다.

font-display 전략은 성능과 미학 간의 상충관계에 관한 다양한 관점을 반영합니다. 따라서 접근 방식을 추천하기는 어렵습니다. 이는 개인 환경설정, 웹 글꼴이 페이지와 브랜드에 얼마나 중요한지, 늦게 도착한 글꼴이 스와핑될 때 얼마나 거슬리는지에 따라 달라집니다.

대부분의 사이트에서 최우선순위에 따라 가장 적합한 세 가지 전략은 다음과 같습니다.

성능: font-display: optional을 사용합니다. 이는 가장 '성능이 좋은' 접근 방식입니다. 텍스트 렌더링이 100ms 이하로 지연되고 글꼴 스와핑 관련 레이아웃 변경이 없다는 보장이 있습니다. 단점은 웹 글꼴이 늦게 도착하면 사용되지 않는다는 것입니다.
텍스트를 빠르게 표시하고 웹 글꼴을 계속 사용: font-display: swap 을 사용하되 레이아웃 변경이 발생하지 않도록 글꼴을 충분히 빨리 전달해야 합니다. 이 옵션의 단점은 글꼴이 늦게 도착할 때 발생하는 거슬리는 변경입니다.
텍스트가 웹 글꼴로 표시됨: font-display: block을 사용하되 텍스트 지연을 최소화할 수 있도록 글꼴을 충분히 빨리 전달해야 합니다. 초기 텍스트 표시가 지연됩니다. 이 지연에도 불구하고 텍스트가 실제로 보이지 않게 그려지고 대체 글꼴 공간이 공간을 예약하는 데 사용되므로 레이아웃 변경이 발생할 수 있습니다. 웹 글꼴이 로드되면 다른 공간이 필요할 수 있으므로 변경이 발생합니다. 텍스트 자체가 변경되는 것으로 보이지 않으므로 font-display: swap보다 변경이 덜 거슬릴 수 있습니다.

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

아이콘 글꼴

일반 웹 글꼴에 적합한 font-display 전략은 아이콘 글꼴에는 적합하지 않습니다. 아이콘 글꼴의 대체 글꼴은 일반적으로 아이콘 글꼴과 크게 다르게 보이며 문자가 완전히 다른 의미를 전달할 수 있습니다. 따라서 아이콘 글꼴은 상당한 레이아웃 변경을 일으킬 가능성이 더 큽니다.

또한 대체 글꼴을 사용하는 것은 실용적이지 않을 수 있습니다. 가능한 경우 아이콘 글꼴을 접근성에도 더 적합한 SVG로 대체하세요. 최신 버전의 인기 아이콘 글꼴은 일반적으로 SVG를 지원합니다. SVG로 전환하는 방법에 관한 자세한 내용은 SVG 스프라이트에 관한 Font Awesome 페이지와 Material Icons 가이드를 참고하세요.

대체 글꼴과 웹 글꼴 간의 변경 줄이기

CLS 영향을 줄이려면 size-adjust 속성을 사용하면 됩니다.

결론

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