웹상의 가변 글꼴 소개

글꼴 파일 크기를 크게 줄일 수 있는 새로운 글꼴 사양

Dave Crossland
Dave Crossland
X GitHub
Mustafa Kurtuldu
Roel Nieskens
Thomas Steiner

이 도움말에서는 가변 글꼴의 정의, 가변 글꼴의 이점, 작업 시 이를 사용하는 방법을 알아봅니다. 먼저 웹에서 서체가 작동하는 방식과 가변 글꼴이 가져오는 혁신에 관해 알아보겠습니다

브라우저 호환성

2020년 5월부터 대부분의 브라우저에서 가변 글꼴이 지원됩니다. 가변 글꼴을 사용할 수 있나요? 및 대체를 참고하세요.

소개

개발자가 글꼴과 서체라는 용어는 종종 같은 의미로 사용됩니다. 하지만 차이점이 있습니다. 서체는 다양한 서체 기술로 존재할 수 있는 기본적인 시각적 디자인이며, 글꼴은 이러한 구현 중 하나이며 디지털 파일 형식으로 되어 있습니다. 즉, 서체는 사용자가 보는 것이고 글꼴은 사용자가 사용하는 것입니다.

종종 간과되는 또 다른 개념은 스타일과 가족의 차이입니다. 스타일은 굵게 기울임꼴과 같은 특정한 단일 서체이고 계열은 완전한 스타일 집합입니다.

가변 글꼴 이전에는 각 스타일이 별도의 글꼴 파일로 구현되었습니다. 가변 글꼴을 사용하면 모든 스타일을 단일 파일에 포함할 수 있습니다.

Roboto 제품군의 다양한 스타일의 표본 구성 및 목록
왼쪽: Roboto 서체 계열의 표본 오른쪽: 계열 내에서 명명된 스타일.

디자이너 및 개발자의 과제

디자이너가 인쇄 프로젝트를 만들 때 페이지 레이아웃의 실제 크기, 사용할 수 있는 색상 수 (사용할 인쇄기의 종류에 따라 결정됨) 등 몇 가지 제약이 발생합니다. 그러나 원하는 만큼 많은 서체 스타일을 사용할 수 있습니다. 즉, 인쇄 매체의 서체가 풍부하고 정교하기 때문에 읽기 환경이 매우 즐거워집니다. 지난번에 훌륭한 잡지를 탐방했던 때를 떠올려 보세요.

웹 디자이너 및 개발자는 인쇄 디자이너와 다른 제약 조건이 있으며, 중요한 하나는 디자인의 관련 대역폭 비용입니다. 비용이 들기 때문에 이 점은 더 풍부한 타이포그래피 환경을 만들기 위한 고착점이 되었습니다. 기존 웹 글꼴을 사용하면 디자인에 사용되는 각 스타일에 사용자가 별도의 글꼴 파일을 다운로드해야 하므로 지연 시간과 페이지 렌더링 시간이 늘어납니다. 일반 및 굵게 스타일과 기울임꼴 스타일만 포함하면 글꼴 데이터가 500KB 이상에 이를 수 있습니다. 이는 글꼴이 렌더링되는 방식, 사용해야 하는 대체 패턴 또는 FOIT 및 FOUT과 같은 원치 않는 부작용을 처리하기 전입니다.

많은 글꼴 모음이 얇은 두께부터 검은색 두께, 좁은 너비 및 넓은 너비, 다양한 스타일 세부정보, 크기별 디자인 (큰 텍스트 크기 또는 작은 텍스트 크기에 최적화됨) 등 훨씬 더 다양한 스타일을 제공합니다. 모든 스타일 (또는 스타일 조합)에 대해 새 글꼴 파일을 로드해야 하므로 많은 웹 개발자가 이러한 기능을 사용하지 않으므로 사용자의 읽기 환경이 저하됩니다.

가변 글꼴 분석

가변 글꼴은 스타일을 단일 파일에 패킹하여 이러한 문제를 해결합니다.

이는 중앙 스타일 또는 '기본' 스타일로 시작합니다. 일반적으로 '일반'은 일반 텍스트에 가장 적합한 가장 일반적인 두께와 너비의 수직 로마 디자인입니다. 그런 다음 '축'이라고 하는 연속된 범위의 다른 스타일에 연결됩니다. 가장 일반적인 축은 기본 스타일을 굵게 스타일에 연결할 수 있는 가중치입니다. 모든 개별 스타일이 축을 따라 배치될 수 있으며, 이를 가변 글꼴의 '인스턴스'라고 합니다. 일부 인스턴스는 글꼴 개발자가 이름을 지정합니다. 예를 들어 가중치 축 위치 600은 SemiBold라고 합니다.

가변 글꼴 Roboto Flex에는 Weight 축에 세 가지 스타일이 있습니다. 일반 스타일이 중앙에 있으며 축의 반대쪽 끝에 두 가지 스타일이 있습니다. 하나는 밝은 스타일, 다른 하나는 더 무거운 스타일입니다. 그중에서 900개의 인스턴스 중에서 선택할 수 있습니다.

다른 두께로 표시된 문자 'A'
위: 글꼴 Roboto의 가중치 축 삽화.

글꼴 개발자는 다양한 축 집합을 제공할 수 있습니다. 모두 동일한 기본 스타일을 공유하므로 결합할 수 있습니다. Roboto의 너비 축에는 세 가지 스타일이 있습니다. 일반 스타일은 축의 중앙에 있고, 두 가지 스타일(좁고 더 넓은 두 스타일)은 양쪽 끝에 있습니다. 일반 스타일의 모든 너비를 제공하고 가중치 축과 결합하여 모든 가중치의 모든 너비를 제공합니다.

너비와 무게를 임의로 조합한 Roboto Flex

수천 가지의 스타일이 있다는 의미입니다. 이는 대단히 오버킬처럼 보일 수 있지만 다양한 유형의 스타일을 통해 읽기 환경의 품질을 크게 향상시킬 수 있습니다. 성능 저하가 없다면 웹 개발자는 원하는 대로 몇 가지 또는 많은 스타일을 사용할 수 있습니다. 이는 개발자의 디자인에 달려 있습니다.

기울임꼴

가변 글꼴에서 기울임꼴이 처리되는 방식은 흥미롭습니다. 두 가지 차이점이 있기 때문입니다. Helvetica 또는 Roboto와 같은 서체에는 보간 호환 윤곽이 있으므로 로마 및 기울임꼴 스타일을 그 사이에 보간할 수 있고 경사 축을 사용하여 로마자에서 기울임꼴로 변환할 수 있습니다.

다른 서체 (예: Garamond, Baskerville 또는 Bodoni)에는 보간이 호환되지 않는 로마 및 기울임꼴 글리프 윤곽이 있습니다. 예를 들어 일반적으로 로마 소문자 'n'을 정의하는 윤곽은 기울임꼴 소문자 'n'을 정의하는 데 사용된 윤곽과 일치하지 않습니다. 기울임꼴 축은 한 윤곽을 다른 윤곽에 보간하는 대신 로마에서 기울임꼴 윤곽으로 전환됩니다.

서체 Amstelvar의 가중치 축 예
Amstelvar의 'n' 윤곽은 기울임꼴 (12점, 일반 두께, 보통 너비) 및 로마자로 되어 있습니다. 이미지 제공: David Berlow, Font Bureau 서체 디자이너 겸 타이포그래피

기울임꼴로 전환한 후에는 문자 집합이 동일해야 하는 것처럼 사용자가 사용할 수 있는 축이 로마자 축과 동일해야 합니다.

글리프 대체 기능은 개별 글리프에서도 확인할 수 있으며 가변 글꼴의 디자인 공간 어디에서나 사용할 수 있습니다. 예를 들어 세로 막대가 두 개인 달러 기호 디자인은 큰 점 크기에서 가장 잘 작동하지만 작은 점 크기에서는 막대가 한 개만 있는 디자인이 좋습니다. 글리프를 렌더링할 픽셀이 더 적으면 두 막대 디자인을 읽기 어려워질 수 있습니다. 이 문제를 해결하기 위해 기울임꼴 축과 마찬가지로 유형 디자이너가 결정한 지점에서 광학 크기 축을 따라 한 글리프를 다른 글리프로 대체할 수 있습니다.

요약하자면, 윤곽에서 허용되는 경우 유형 디자이너는 다차원 디자인 공간에서 다양한 스타일 간에 보간되는 글꼴을 만들 수 있습니다. 이를 통해 서체를 세밀하게 제어할 수 있으며 강력한 기능을 활용할 수 있습니다.

축 정의

5개의 등록된 축은 글꼴의 알려진 예측 가능한 기능인 두께, 너비, 광학 크기, 경사, 기울임꼴을 제어합니다. 그 외에도 글꼴에 맞춤 축이 포함될 수 있습니다. 이를 통해 서체 디자이너가 원하는 글꼴의 디자인 측면(예: Serif 크기, 스와시 길이, 어센더 높이, i의 점 크기)를 제어할 수 있습니다.

축은 같은 특성을 제어할 수 있지만 다른 값을 사용할 수 있습니다. 예를 들어 Oswald 및 Hepta Slab 변수 글꼴에서는 사용할 수 있는 축이 하나뿐이지만 범위는 다릅니다. Oswald는 변수로 업그레이드되기 전과 동일한 범위(200~700)를 가지고 있지만 Hepta Slab은 1에서 극단적인 헤어라인 가중치가 900까지 모두 상승합니다.

등록된 축 5개에는 CSS에서 값을 설정하는 데 사용되는 4자의 소문자 태그가 있습니다.

축 이름 및 CSS 값
가중치 wght
너비 wdth
빈정 상함 slnt
광학 크기 opsz
기울임꼴 ital

글꼴 개발자가 가변 글꼴에서 사용할 수 있는 축과 보유할 수 있는 값을 정의하므로 각 글꼴이 제공하는 항목을 파악하는 것이 중요합니다. 글꼴의 문서에서 이를 제공하거나 Wakamai Fondue와 같은 도구를 사용하여 글꼴을 검사할 수 있습니다.

사용 사례 및 이점

축 값을 설정하는 것은 개인적인 취향과 서체 권장사항을 적용합니다. 새로운 기술의 위험은 오용일 수 있으며 지나치게 예술적이거나 탐색적인 설정도 실제 텍스트의 가독성을 저하시킬 수 있습니다. 제목의 경우 다양한 축을 탐색하여 훌륭한 예술적 디자인을 만드는 것은 흥미로울 수 있지만 본문을 복사하는 경우 텍스트를 읽을 수 없게 될 위험이 있습니다.

흥미진진한 표정

잔디밭 예: Mandy Michael

예술적 표현의 좋은 예로 맨디 마이클의 서체 Decovar를 살펴봅니다.

위 샘플의 실제로 작동하는 예와 소스 코드는 여기에서 볼 수 있습니다.

애니메이션

Typeface Zycon은 Font Bureau의 서체 디자이너 및 서체 담당자인 David Berlow가 애니메이션용으로 디자인했습니다.

가변 글꼴로 문자 애니메이션을 적용할 수도 있습니다. 위의 예는 다양한 축이 Zycon에서 서체에 사용된 예입니다. Axis Praxis의 실시간 애니메이션 예를 참고하세요.

Anicons는 머티리얼 디자인 아이콘을 기반으로 한 세계 최초의 애니메이션 색상 아이콘 글꼴입니다. Anicons는 가변 글꼴과 색상 글꼴이라는 두 가지 최첨단 글꼴 기술을 결합한 실험입니다.

Anicon의 색상 아이콘 글꼴에서 가져온 마우스 오버 애니메이션의 몇 가지 예

피네세

Amstelvar는 XTRA의 작은 부분을 반대 방향으로 사용하여 단어의 너비가 고르게 조정되도록 합니다.

Roboto Flex 및 Amstelvar는 '매개변수 축' 집합을 제공합니다. 이러한 축에서 문자는 검은색 또는 긍정적인 모양, 흰색 또는 음의 모양, x 및 y차원의 4가지 기본적 측면으로 분해됩니다. 기본 색상을 다른 색상과 혼합하여 조정할 수 있는 것과 같은 방식으로 이 4가지 측면을 사용하여 다른 축을 미세 조정할 수 있습니다.

Amstelvar의 XTRA 축을 사용하면 위와 같이 1,000회당 '흰색' 값을 조정할 수 있습니다. 반대 방향으로 XTRA의 작은 비트를 사용하여 단어의 너비가 균일해집니다.

CSS의 가변 글꼴

가변 글꼴 파일 로드

가변 글꼴은 기존 정적 웹 글꼴과 동일한 @font-face 메커니즘을 통해 로드되지만 다음과 같은 두 가지 새로운 개선사항이 있습니다.

@font-face {
    font-family: 'Roboto Flex';
    src: url('RobotoFlex-VF.woff2') format('woff2-variations');
    src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}

1. 소스 형식: 브라우저가 가변 글꼴을 지원하지 않는 경우 브라우저가 글꼴을 다운로드하지 않도록 하므로 format 및 tech 설명을 향후 구문(format('woff2') tech('variations'))에 한 번 추가합니다. 지원 중단되었지만 브라우저 구문 (format('woff2-variations'))에서 지원됩니다. 브라우저가 가변 글꼴을 지원하고 향후 구문을 지원하는 경우 첫 번째 선언을 사용합니다. 가변 글꼴 및 현재 구문을 지원하는 경우 두 번째 선언을 사용합니다. 둘 다 동일한 글꼴 파일을 가리킵니다.

2. 스타일 범위: font-weight와 font-stretch에 두 개의 값이 제공되고 있는 것을 알 수 있습니다. 이 글꼴이 제공하는 특정 두께 (예: font-weight: 500;)를 브라우저에 알리는 대신 이제 글꼴에서 지원하는 두께 범위를 브라우저에 제공합니다. Roboto Flex의 경우 가중치 축 범위는 100~1,000이며 CSS는 축 범위를 font-weight 스타일 속성에 직접 매핑합니다. @font-face에 범위를 지정하면 이 범위를 벗어나는 값은 가장 가까운 유효한 값으로 '제한'됩니다. 너비 축 범위는 font-stretch 속성과 동일한 방식으로 매핑됩니다.

Google Fonts API를 사용하고 있다면 이 모든 것이 처리됩니다. CSS에 적절한 소스 형식과 범위가 포함될 뿐만 아니라 가변 글꼴이 지원되지 않는 경우 Google Fonts가 정적 대체 글꼴도 전송합니다.

가중치 및 너비 사용

현재 CSS에서 안정적으로 설정할 수 있는 축은 font-weight을 통한 wght 축 및 font-stretch을 통한 wdth 축입니다.

일반적으로 font-weight를 키워드(light, bold) 또는 100~900 사이의 숫자 값(100단계)으로 설정합니다. 가변 글꼴을 사용하면 글꼴의 너비 범위 내의 값을 설정할 수 있습니다.

.kinda-light {
  font-weight: 125;
}

.super-heavy {
  font-weight: 1000;
}
Roboto Flex의 가중치 축이 최솟값에서 최댓값으로 변경됨

마찬가지로 키워드 (condensed, ultra-expanded) 또는 백분율 값으로 font-stretch를 설정할 수 있습니다.

.kinda-narrow {
  font-stretch: 33.3%;
}

.super-wide {
  font-stretch: 151%;
}
Roboto Flex의 너비 축이 최솟값에서 최댓값으로 변경됨

기울임꼴 및 기울임꼴 사용

ital 축은 일반 스타일과 기울임꼴 스타일을 모두 포함하는 글꼴에 사용됩니다. 축은 켜기/끄기 스위치입니다. 값 0가 꺼져 있고 일반 스타일을 표시하고, 값 1은 기울임꼴을 표시합니다. 다른 축과 달리 전환은 없습니다. 0.5 값은 '절반 기울임꼴'을 제공하지 않습니다.

slnt 축은 새로운 스타일이 아니라 일반 스타일을 기울인다는 점에서 기울임꼴과 다릅니다. 기본적으로 값은 0입니다. 즉, 기본 수직형 문자 도형입니다. Roboto Flex의 최대 기울기는 -10도입니다. 즉, 0에서 -10으로 변할 때 문자가 오른쪽으로 기울어집니다.

font-style 속성을 통해 이러한 축을 설정하는 것은 직관적일 수 있지만 2020년 4월 현재 이를 정확히 수행하는 방법은 여전히 개선되고 있습니다. 따라서 지금은 이를 커스텀 축으로 처리하고 font-variation-settings를 통해 설정해야 합니다.

i, em, .italic {
    /* Should be font-style: italic; */
    font-variation-settings: 'ital' 1;
}

.slanted {
    /* Should be font-style: oblique 10deg; */
    font-variation-settings: 'slnt' 10;
}
Roboto Flex의 경사 축이 최솟값에서 최댓값으로 변경됨

광학 크기 사용

서체는 매우 작게 (12px 각주) 또는 매우 크게 (80px 헤드라인) 렌더링할 수 있습니다. 글꼴은 크기에 더 잘 맞게 문자 모양을 변경하여 이러한 크기 변경에 반응할 수 있습니다. 작은 크기는 세부적인 부분이 없는 것이 나을 수 있고 큰 크기는 좀 더 세부적인 부분과 얇은 스트로크가 도움이 될 수 있습니다.

다양한 광학 크기로 표시된 문자 'a'
Roboto Flex의 문자 'a'는 서로 다른 픽셀 크기에서 동일한 크기로 조정된 후 디자인의 차이를 보여줍니다. Codepen에서 직접 사용해 보기

이 축에 새 CSS 속성 font-optical-sizing가 도입되었습니다. 기본적으로 auto로 설정되므로 브라우저가 font-size를 기반으로 축 값을 설정합니다. 즉, 브라우저에서 자동으로 최적의 광학 크기를 선택하지만 이 기능을 사용 중지하려면 font-optical-sizing를 none로 설정하면 됩니다.

의도적으로 글꼴 크기와 일치하지 않는 광학 크기를 원하는 경우 opsz 축의 맞춤 값을 설정할 수도 있습니다. 다음 CSS는 텍스트가 8pt로 인쇄된 것처럼 광학 크기로 표시되도록 합니다.

.small-yet-large {
  font-size: 100px;
  font-variation-settings: 'opsz' 8;
}

커스텀 축 사용

등록된 축과 달리 맞춤 축은 기존 CSS 속성에 매핑되지 않으므로 항상 font-variation-settings를 통해 설정해야 합니다. 커스텀 축의 태그는 등록된 축과 구별하기 위해 항상 대문자입니다.

Roboto Flex는 몇 가지 맞춤 축을 제공하며 가장 중요한 것은 등급 (GRAD)입니다. 경사 축은 너비를 변경하지 않고 글꼴 두께를 변경하므로 줄바꿈이 변경되지 않는다는 점에서 흥미롭습니다. 경사 축을 사용하면 전체 너비에 영향을 미치는 가중치 축 변경사항과 함께 강제로 바이올린 후 전체 가중치에 영향을 미치는 너비 축의 변경사항을 방지할 수 있습니다.

Roboto Flex 경사 축이 최솟값에서 최댓값으로 변경됨

GRAD는 커스텀 축이므로 Roboto Flex의 범위는 -200~150입니다. font-variation-settings로 해결해야 합니다.

.grade-light {
    font-variation-settings: `GRAD` -200;
}

.grade-normal {
    font-variation-settings: `GRAD` 0;
}

.grade-heavy {
    font-variation-settings: `GRAD` 150;
}

Google Fonts의 가변 글꼴

Google Fonts는 가변 글꼴로 카탈로그를 확장하고 정기적으로 새로운 글꼴을 추가했습니다. 현재 인터페이스는 글꼴에서 단일 인스턴스를 선택하는 것을 목표로 합니다. 원하는 변형을 선택하고 '이 스타일 선택'을 클릭하면 Google Fonts에서 CSS와 글꼴을 가져오는 <link> 요소에 추가됩니다.

사용 가능한 모든 축 또는 값 범위를 사용하려면 Google Fonts API에 URL을 수동으로 작성해야 합니다. 변수 글꼴 개요에는 모든 축과 값이 나열됩니다.

Google 가변 글꼴 링크 도구에서도 전체 가변 글꼴의 최신 URL을 제공합니다.

글꼴 변형 설정 상속

등록된 모든 축이 곧 기존 CSS 속성을 통해 지원되지만 당분간은 font-variation-settings를 대체 수단으로 사용해야 할 수도 있습니다. 글꼴에 맞춤 축이 있는 경우 font-variation-settings도 필요합니다.

하지만 font-variation-settings와(과) 관련해 주의해야 할 점이 있습니다. 명시적으로 설정하지 않은 모든 속성은 기본값으로 자동 재설정됩니다. 이전에 설정한 값은 상속되지 않습니다. 즉, 다음이 예상대로 작동하지 않습니다.

<span class="slanted grade-light">
    I should be slanted and have a light grade
</span>

먼저 브라우저는 .slanted 클래스의 font-variation-settings: 'slnt' 10를 적용합니다. 그런 다음 .grade-light 클래스의 font-variation-settings: 'GRAD' -200를 적용합니다. 하지만 이렇게 하면 slnt가 기본값인 0으로 재설정됩니다. 결과는 비스듬히 서 있지 않은 밝은 느낌의 텍스트가 됩니다.

다행히 CSS 변수를 사용하여 이 문제를 해결할 수 있습니다.

/* Set the default values */
:root {
    --slnt: 0;
    --GRAD: 0;
}

/* Change value for these elements and their children */
.slanted {
    --slnt: 10;
}

.grade-light {
    --grad: -200;
}

.grade-normal {
    --grad: 0;
}

.grade-heavy {
    --grad: 150;
}

/* Apply whatever value is kept in the CSS variables */
.slanted,
.grade-light,
.grade-normal,
.grade-heavy {
    font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
}

CSS 변수는 하위로 전파되므로 요소 (또는 상위 요소 중 하나)에서 slnt를 10로 설정하는 경우 GRAD를 다른 값으로 설정해도 해당 값이 유지됩니다. 이 기법에 관한 자세한 설명은 변수 글꼴 상속 수정을 참고하세요.

CSS 변수 애니메이션은 설계상 작동하지 않으므로 다음과 같은 기능이 작동하지 않습니다.

@keyframes width-animation {
   from { --wdth: 25; }
   to   { --wdth: 151; }
}

이러한 애니메이션은 font-variation-settings에서 직접 실행되어야 합니다.

실적 향상

OpenType 가변 글꼴을 사용하면 서체의 여러 변형을 단일 글꼴 파일에 저장할 수 있습니다. 모노타입은 12개의 입력 글꼴을 결합하여 기울임꼴과 로마식 스타일에서 세 가지 너비로 8개의 가중치를 생성하는 실험을 실행했습니다. 48개의 개별 글꼴을 단일 가변 글꼴 파일에 저장하면 파일 크기가 88% 감소했습니다.

그러나 Roboto Regular 같은 단일 글꼴을 사용하고 다른 글꼴을 사용하지 않는 경우 여러 축이 있는 가변 글꼴로 전환하면 글꼴 크기의 순 증가 효과가 나타나지 않을 수 있습니다. 언제나 그렇듯이 사용 사례에 따라 다릅니다.

반대로 설정 간에 글꼴을 애니메이션하면 성능 문제가 발생할 수 있습니다. 이 방법은 브라우저의 가변 글꼴 지원이 더 성숙해지면 개선되지만 현재 화면에 표시되는 글꼴을 애니메이션으로 처리함으로써 문제를 다소 줄일 수 있습니다. Dinamo의 다음 스니펫은 클래스가 vf-animation인 요소가 화면에 없을 때 애니메이션을 일시중지합니다.

var observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(function(entry) {
    // Pause/Play the animation
    if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
    else entry.target.style.animationPlayState = "paused"
  });
});

var variableTexts = document.querySelectorAll(".vf-animation");
variableTexts.forEach(function(el) { observer.observe(el); });

글꼴이 사용자 상호작용에 반응하면 입력 이벤트를 제한 또는 디바운스하는 것이 좋습니다. 이렇게 하면 브라우저가 이전 인스턴스에서 크게 변경되지 않은 가변 글꼴의 인스턴스를 사람 눈으로 볼 수 없을 정도로 렌더링하지 않습니다.

Google Fonts를 사용하는 경우 Google 글꼴이 호스팅되는 도메인인 https://fonts.gstatic.com에 미리 연결하는 것이 좋습니다. 이렇게 하면 CSS에서 글꼴을 발견할 때 브라우저가 글꼴을 가져올 위치를 초기에 알 수 있습니다.

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

이 팁은 다른 CDN에도 적용됩니다. 즉, 브라우저에서 네트워크 연결을 더 빨리 설정할수록 글꼴을 더 빨리 다운로드할 수 있습니다.

가장 빠른 Google 글꼴에서 Google Fonts 로드에 관한 자세한 성능 도움말을 확인하세요.

대체 및 브라우저 지원

모든 최신 브라우저는 가변 글꼴을 지원합니다. 이전 브라우저를 지원해야 하는 경우 정적 글꼴로 사이트를 빌드하고 점진적 개선으로 가변 글꼴을 사용할 수 있습니다.

/* Set up Roboto for old browsers, only regular + bold */
@supports not (font-variation-settings: normal) {
  @font-face {
    font-family: Roboto;
    src: url('Roboto-Regular.woff2');
    font-weight: normal;
  }

  @font-face {
    font-family: Roboto;
    src: url('Roboto-Bold.woff2');
    font-weight: bold;
  }

  body {
    font-family: Roboto;
  }

  .super-bold {
    font-weight: bold;
  }
}

/* Set up Roboto for modern browsers, all weights */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'Roboto';
    src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
         url('RobotoFlex-VF.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
  }

  .super-bold {
    font-weight: 1000;
  }
}

이전 브라우저에서는 .super-bold 클래스가 포함된 텍스트가 보통 굵게 렌더링됩니다. 이 글꼴이 유일하게 사용할 수 있는 굵은 글꼴이기 때문입니다. 가변 글꼴이 지원되면 실제로 가장 무거운 글꼴인 1, 000을 사용할 수 있습니다.

@supports 규칙은 Internet Explorer에서 지원되지 않으므로 이 브라우저에는 스타일이 표시되지 않습니다. 이것이 문제가 된다면 언제든지 기존의 해킹 방법 중 하나를 사용하여 관련된 이전 브라우저를 타겟팅할 수 있습니다.

Google Fonts API를 사용하면 방문자의 브라우저에 적합한 글꼴을 로드합니다. 다음과 같이 200~700 두께의 Oswald 글꼴을 요청한다고 가정해 보겠습니다.

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">

가변 글꼴을 처리할 수 있는 최신 브라우저는 가변 글꼴을 가져오고 200~700 사이의 모든 가중치를 사용할 수 있습니다. 이전 브라우저에는 가중치마다 개별 정적 글꼴이 제공됩니다. 이 경우 글꼴 파일 6개(가중치 200, 가중치 300 등)를 하나씩 다운로드하게 됩니다.

감사합니다.

이 도움말은 다음 사람들의 도움이 있었을 때만 가능했을 것입니다.

Unsplash에 Bruno Martins의 히어로 이미지입니다.