이 페이지는 Cloud Translation API를 통해 번역되었습니다.

웹상의 가변 글꼴 소개

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

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

이 문서에서는 가변 글꼴의 정의, 가변 글꼴의 이점, 작업에서 이러한 글꼴을 사용하는 방법을 살펴봅니다. 먼저 웹에서 서체가 작동하는 방식과 가변 글꼴이 가져오는 혁신을 살펴보겠습니다.

브라우저 호환성

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

소개

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

종종 간과되는 또 다른 개념은 스타일과 패밀리의 구분입니다. 스타일은 Bold Italic과 같은 단일하고 고유한 서체이고, 모음은 전체 스타일 세트입니다.

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

Roboto 계열의 다양한 스타일의 샘플 구성 및 목록 — 왼쪽: Roboto 서체 모음의 샘플입니다. 오른쪽: 계열 내에서 이름이 지정된 스타일

디자이너와 개발자의 과제

디자이너가 인쇄 프로젝트를 만들 때는 페이지 레이아웃의 실제 크기, 사용할 수 있는 색상 수(사용할 인쇄기의 종류에 따라 결정됨)와 같은 몇 가지 제약 조건이 있습니다. 하지만 서체 스타일은 원하는 만큼 사용할 수 있습니다. 즉, 인쇄 미디어의 서체가 풍부하고 정교한 경우가 많아서 읽기 환경이 매우 즐겁습니다. 훌륭한 잡지를 즐겁게 탐색했던 마지막 순간을 떠올려 보세요.

웹 디자이너와 개발자는 인쇄 디자이너와는 다른 제약조건이 있으며, 그중 중요한 것은 디자인과 관련된 대역폭 비용입니다. 이는 대가가 따릅니다. 기존 웹 글꼴을 사용하면 디자인에 사용되는 각 스타일에 대해 사용자가 별도의 글꼴 파일을 다운로드해야 하므로 지연 시간과 페이지 렌더링 시간이 늘어납니다. 일반 및 굵은 스타일과 기울임꼴에 해당하는 스타일만 포함해도 글꼴 데이터가 500KB 이상 될 수 있습니다. 이는 글꼴이 렌더링되는 방식, 사용해야 하는 대체 패턴 또는 FOIT 및 FOUT과 같은 바람직하지 않은 부작용을 처리하기 전입니다.

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

가변 글꼴의 구성

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

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

가변 글꼴 Roboto Flex에는 두께 축에 세 가지 스타일이 있습니다. 일반 스타일이 가운데에 있고 축의 양 끝에 두 가지 스타일이 있습니다. 하나는 더 밝고 다른 하나는 더 어둡습니다. 이 중에서 900개의 인스턴스 중에서 선택할 수 있습니다.

다양한 두께로 표시된 'A' 문자 — 위: Roboto 서체의 굵기 축의 해부학적 설명입니다.

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

너비와 두께의 무작위 조합으로 Roboto Flex

이것은 수천 가지 스타일이 있다는 것을 의미합니다. 지나치게 많은 것처럼 보일 수 있지만, 이러한 다양한 서체 스타일을 사용하면 독서 환경의 품질을 크게 향상할 수 있습니다. 성능 저하가 없다면 웹 개발자는 원하는 만큼 스타일을 사용할 수 있습니다. 디자인에 따라 다릅니다.

기울임꼴

가변 글꼴에서 기울임꼴이 처리되는 방식은 흥미롭습니다. 두 가지 접근 방식이 있기 때문입니다. Helvetica나 Roboto와 같은 서체에는 보간과 호환되는 윤곽선이 있으므로 로만과 이탤릭 스타일 간에 보간할 수 있으며 기울기 축을 사용하여 로만에서 이탤릭으로 전환할 수 있습니다.

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

Amstelvar 서체의 두께 축의 예 — 기울임꼴 (12점, 일반 두께, 일반 너비) 및 로마자로 된 Amstelvar의 'n' 윤곽 이미지는 Font Bureau의 활자 디자이너 겸 활자 제작자인 David Berlow가 제공했습니다.

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

글리프 대체 기능은 개별 글리프에 표시되며 가변 글꼴의 디자인 공간 어디서나 사용할 수 있습니다. 예를 들어 세로 막대가 두 개 있는 달러 기호 디자인은 포인트 크기 크면 가장 잘 작동하지만 포인트 크기가 작을 때는 막대가 하나만 있는 디자인이 더 좋습니다. 글리프를 렌더링하는 데 사용할 수 있는 픽셀이 적으면 두 막대 디자인을 읽을 수 없게 될 수 있습니다. 이를 방지하기 위해, 기울기 축과 마찬가지로 서체 디자이너가 결정한 지점에서 시각적 크기 축을 따라 글리프가 다른 글리프로 대체될 수 있습니다.

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

축 정의

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

축이 동일한 지형지물을 제어할 수 있지만 다른 값을 사용할 수 있습니다. 예를 들어 Oswald 및 Hepta Slab 가변 글꼴에는 사용 가능한 축이 하나(두께)이지만 범위는 다릅니다. Oswald는 가변으로 업그레이드되기 전과 동일한 범위(200~700)를 가지지만 Hepta Slab은 1에서 최대 900까지의 극단적인 헤어라인 두께를 갖습니다.

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

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

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

사용 사례 및 이점

축 값을 설정하는 것은 개인 취향과 서체 권장사항을 적용하는 것으로 귀결됩니다. 새로운 기술의 위험은 오용될 수 있다는 점입니다. 지나치게 예술적이거나 탐색적인 설정은 실제 텍스트의 가독성을 떨어뜨릴 수도 있습니다. 타이틀의 경우 훌륭한 예술적 디자인을 만들기 위해 다양한 축을 탐색하는 것은 흥미로운 일이지만 본문 카피의 경우 텍스트를 읽기 어렵게 만들 수 있습니다.

흥미로운 표현

예술적 표현의 한 가지 좋은 예는 맨디 마이클의 서체 탐색인 Decovar입니다.

위 샘플의 작동 예시와 소스 코드는 여기에서 확인할 수 있습니다.

애니메이션

Font Bureau의 서체 디자이너이자 서체 제작자인 데이비드 버로우가 애니메이션용으로 디자인한 서체 Zycon입니다.

가변 글꼴로 캐릭터 애니메이션을 살펴볼 수도 있습니다. 위는 서체 Zycon과 함께 사용되는 다른 축의 예입니다. Axis Praxis의 애니메이션 예시를 실시간으로 확인하세요.

Anicons는 Material Design 아이콘을 기반으로 한 전 세계 최초의 애니메이션 색상 아이콘 글꼴입니다. Anicons는 두 가지 최신 글꼴 기술인 가변 글꼴과 컬러 글꼴을 결합한 실험입니다.

Anicon의 컬러 아이콘 글꼴에서 가져온 마우스 오버 애니메이션의 몇 가지 예입니다.

Finesse

Amstelvar: 단어의 너비가 균등해지도록 반대 방향으로 XTRA를 조금씩 사용합니다.

Roboto Flex 및 Amstelvar는 일련의 '파라메트릭 축'을 제공합니다. 이 축에서 문자는 4가지 기본적인 형태 측면(검은색 또는 양수 도형, 흰색 또는 음수 도형, x 및 y 크기)으로 분해됩니다. 기본 색상을 다른 색상과 혼합하여 조정할 수 있는 것처럼 이러한 4가지 측면을 사용하여 다른 축을 미세 조정할 수 있습니다.

Amstelvar의 XTRA 축을 사용하면 위에 표시된 대로 '백분율' 값을 조정할 수 있습니다. 반대 방향으로 약간의 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-variations')) 간에 지원되는 한 번은 향후 문법 (format('woff2') tech('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는 몇 가지 맞춤 축을 제공하며 가장 중요한 것은 Grade(GRAD)입니다. Grade 축은 너비를 변경하지 않고 글꼴의 두께를 변경하므로 줄바꿈이 변경되지 않는 점이 흥미롭습니다. 등급 축을 조정하면 전체 너비에 영향을 미치는 두께 축을 변경한 다음 전체 두께에 영향을 미치는 너비 축을 변경하는 번거로움을 피할 수 있습니다.

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도 확인할 수 있습니다.

Font-variation-settings 상속

등록된 모든 축은 곧 기존 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개의 입력 글꼴을 결합하여 기울임꼴과 로마식 스타일에서 3개의 너비에 해당하는 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); });

글꼴이 사용자 상호작용에 반응하는 경우 입력 이벤트를 제한하거나 debounce하는 것이 좋습니다. 이렇게 하면 브라우저가 이전 인스턴스와 거의 차이가 없어 인간의 눈에는 차이가 보이지 않는 가변 글꼴 인스턴스를 렌더링하지 않습니다.

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

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

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

가장 빠른 Google Fonts에서 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의 오스왈드 글꼴을 요청한다고 가정해 보겠습니다.

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

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

감사합니다.

이 도움말은 다음과 같은 분들의 도움으로 작성되었습니다.

무스타파 쿠르툴두, Google UX 디자이너 겸 디자인 어드바이저
Kabisa의 UX 디자이너/개발자 및 서체 전문가인 Roel Nieskens
데이브 크로스랜드, Google Fonts 프로그램 관리자
데이비드 베를로, Font Bureau의 서체 디자이너 겸 서체 제작자
axis-praxis.org 개발자 로렌스 페니
variablefonts.dev 개발자 맨디 마이클

히어로 이미지: 브루노 마틴스(Unsplash)