이제 Google Fonts는 v2 API 업데이트에서 가변 글꼴을 완벽하게 지원합니다. 단일 글꼴 모음과 여러 글꼴 모음을 모두 호출하는 방법과 축 범위를 지정하는 방법을 설명합니다. 가변 글꼴을 자세히 살펴보려면 TypeNetwork에서 데이비드 베로우의 대화형 삽화 브로셔를 참고하세요.
새로운 기능
모든 것이 새로운 기본 URL로 시작합니다.
https://fonts.googleapis.com/css2
각 패밀리 내에서 스타일을 지정하는 구문이 가변 글꼴 '디자인 공간'을 설명하도록 변경되었습니다.
빠른 시작 가이드
다음 HTML을 복사하여 파일에 붙여넣습니다.
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
<style>
body {
font-family: 'Crimson Pro', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
브라우저를 사용하여 파일을 열면 페이지에서 Crimson Pro 글꼴로 '웹을 아름답게 만들기'라는 텍스트를 렌더링해야 합니다.
여러 가족
여러 가족을 요청하려면 각 가족의 family= 매개변수를 지정하세요.
예를 들어 Crimson Pro 및 Literata 글꼴을 요청하는 방법은 다음과 같습니다.
https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata
다음 HTML을 복사하여 파일에 붙여넣습니다.
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata">
<style>
body {
font-size: 48px;
}
div:nth-child(1) {
font-family: 'Crimson Pro', serif;
}
div:nth-child(2) {
font-family: 'Literata’, serif;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
<div>Making the Web Beautiful!</div>
</body>
</html>
브라우저를 사용하여 파일을 열면 페이지에서 Crimson Pro에서 '웹을 아름답게 만들기'라는 텍스트를 렌더링한 후 Literata에서 렌더링합니다.
축 범위
가변 글꼴은 종종 추가 지연 시간 없이 연속적인 스타일 범위를 제공합니다. 이는 반응형 디자인과 관련이 있습니다. 이 동적 서체는 연속적인 스타일 범위를 사용하여 페이지에서 100~900 사이의 모든 가중치를 제공하며 일부 조건에 따라 가중치를 반응형으로 변경합니다.
가변 글꼴 축 범위를 요청하려면 2개의 값을 ..와 조인합니다.
| 글꼴 | 요청 |
|---|---|
크림슨 프로[wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900 |
진홍색 Pro 기울임꼴[wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900 |
진홍색 프로 굵은 기울임꼴 및 [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700 |
개별 스타일(예: 가중치)
스타일 사양이 없으면 API가 요청된 계열의 기본 스타일을 제공합니다. 특정 두께와 같은 다른 개별 스타일을 요청하려면 글꼴 모음 이름 뒤에 콜론 (:)을 추가하고 알파벳 순서로 축 속성 키워드 목록, @ 기호 (@), 하나 이상의 해당 축 속성 값 목록을 추가합니다.
다음 예를 참고하세요.
| 글꼴 | 요청 |
|---|---|
| Crimson Pro (기본값) | https://fonts.googleapis.com/css2?family=Crimson+Pro |
| 진홍색 프로 굵게 | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700 |
| 크림슨 프로 일반 & 굵은 글꼴 | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700 |
| 진홍색 프로 굵은 기울임꼴 | https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700 |
Google Fonts에는 각 글꼴 모음에 사용 가능한 모든 스타일이 표시됩니다.
기본 스타일
요청에서 축의 위치 또는 범위를 지정하지 않으면 기본 위치가 사용됩니다. 기울임꼴 축의 기본 위치는 0 (일반)이고 가중치 축의 기본값은 400 (일반)입니다.
기본 위치를 포함하지 않는 축의 경우 해당 축의 위치를 지정하지 않은 요청은 실패합니다. 예를 들어 가중치 축이 500~900인 가족을 요청할 때 가중치 위치를 지정해야 합니다.
비표준 가중치
정적 글꼴의 경우 가중치 스타일은 일반적으로 100의 배수로 지정됩니다(예: 300, 400, 700). 가변 글꼴은 표준 가중치와 중간 가중치를 모두 제공합니다. 중간 가중치를 렌더링하는 방법은 다음과 같습니다.
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
지연 시간 및 파일 크기 최적화
사용 중인 스타일을 정확하게 입력하세요. API는 가장 작은 글꼴 세트에서 요청된 스타일을 제공합니다. 사용하지 않는 스타일을 요청하면 사용자가 필요한 것보다 더 많은 글꼴 데이터를 다운로드하게 되어 지연 시간이 늘어날 수 있습니다. 3가지 특정 가중치만 사용하는 경우 요청에서 개별 스타일로 지정합니다. 연속 가중치 범위를 사용하는 경우 요청에서 해당 가중치 범위를 지정하세요.
글꼴 표시 사용
font-display 속성을 사용하면 글꼴이 아직 로드 중이거나 다른 방식으로 사용할 수 없을 때 발생하는 상황을 제어할 수 있습니다. 기본 auto 이외의 값을 지정하는 것이 일반적으로 적절합니다.
display 매개변수에 원하는 값을 전달합니다.
https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap
글꼴 요청 최적화
때로 사이트 또는 애플리케이션에 웹 글꼴을 사용할 때 어떤 문자가 필요한지 미리 알고 있는 경우가 많습니다. 이 문제는 로고나 제목에 웹 글꼴을 사용할 때 흔히 발생합니다.
이러한 경우 글꼴 요청 URL에 text= 값을 지정하는 것이 좋습니다. 이렇게 하면 Google Fonts에서 요청에 최적화된 글꼴 파일을 반환합니다. 경우에 따라 글꼴 파일의 크기를 최대 90% 줄일 수 있습니다.
이 기능을 사용하려면 text=를 API 요청에 추가하기만 하면 됩니다. 예를 들어 블로그 제목에 Inconsolata만 사용하고 있다면 제목 자체를 text= 값으로 입력할 수 있습니다. 요청 결과는 다음과 같습니다.
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello
모든 쿼리 문자열과 마찬가지로 값을 URL 인코딩해야 합니다.
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World
이 기능은 국제 글꼴에도 사용할 수 있으므로 UTF-8 문자를 지정할 수 있습니다. 예를 들어 ¡Hola!는 다음과 같이 표현됩니다.
https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!
'text=' 매개변수는 한 번만 지정할 수 있습니다. 요청의 모든 가족 그룹에 적용됩니다. 여러 제품군에서 다른 텍스트 최적화가 필요한 경우 별도의 API 요청을 사용하세요.
API URL 구성
엄격성
일반적으로 업데이트된 CSS API는 원래 CSS API보다 요청을 더 엄격하게 수락합니다.
일반 가이드라인:
- 축을 알파벳순으로 나열 (
en-US언어) - 축 값 그룹 (예: 튜플)을 숫자로 정렬해야 함
- 튜플은 겹치거나 터치할 수 없습니다 (예:
wght400..500 및 500..600).
API URL 사양
/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]
spec: <family_name>[:<axis_tag_list>@<axis_tuple_list>]
family_name: 글꼴 모음의 이름
axis_tag_list: <axis>[,<axis>...] // Sorted alphabetically (en-US locale)
axis: 축 태그(예: ital, wdth, wght)
axis_tuple_list: <axis_tuple>[;<axis_tuple>...]
axis_tuple: <value>[,<value>...] // Same length as axis_tag_list
value: <range> | <float>
range: <float>..<float>
float: 해당 축의 범위 내의 값
text: 요청된 서체에 표시되는 텍스트입니다.
display: auto | block | swap | fallback | optional
이전 브라우저 지원
가변 글꼴을 지원하지 않는 브라우저에서는 디자인을 의도한 대로 표시하지 못할 수도 있습니다. caniuse에서 브라우저의 가변 글꼴 지원을 확인하세요.
점진적 개선을 연습하면 이러한 이전 브라우저에서 예기치 않은 동작을 방지할 수 있습니다. CSS에서 @supports 쿼리를 사용하여 가변 글꼴 기능을 통제합니다.
이 예에서는 Markazi Text의 가중치 450을 사용하고 싶지만, 가변 글꼴 기능이 지원되지 않는다면 Regular (가중치 400) 또는 Medium (가중치 500)으로 대체해야 합니다.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@450" />
<style>
* {
font-family: 'Markazi Text';
font-weight: 400;
}
@supports (font-variation-settings: "wght" 450) {
* {
font-family: 'Markazi Text';
font-weight: 450;
}
}
</style>
CSS 요청 Markazi+Text:wght@450은 가변 글꼴을 지원하는 클라이언트에 가중치 450을 전송하고 지원하지 않는 클라이언트에 가중치 400 및 500을 전송합니다. 일반적으로 요청 범위 대체는 이전 브라우저에서 제공됩니다.
| Axis | 대체 |
|---|---|
ital |
0, 1 |
wght |
100, 200, 300, 400, 500, 600, 700, 800, 900 |
이 예에서는 기존 브라우저에서 몇 가지 요청에 사용할 수 있는 스타일을 보여줍니다.
| 요청 | 이전 브라우저에서 사용 가능한 스타일 |
|---|---|
ital@0 |
ital@0 |
wght@500 |
wght@500 |
wght@432 |
wght@400;500 |
wght@440..560 |
wght@400;500;600 |
사용 가능한 가변 글꼴
v2 API에서 사용 가능한 가변 글꼴의 표는 여기에서 확인할 수 있습니다.
추가 자료
- Google Fonts에서 Google Fonts API에서 제공하는 글꼴 모음의 전체 목록을 참고하세요.
- Google Fonts API의 작동 방식에 관한 자세한 내용은 기술적 고려사항 페이지를 참고하세요.