Developer API를 사용하면 Google Fonts에서 제공하는 모든 가족 그룹의 메타데이터에 액세스할 수 있습니다. 이를 통해 앱에서 사용 가능한 글꼴 모음을 Google Fonts에 쿼리할 수 있습니다. REST API는 각 계열의 스타일과 스크립트(Google Fonts에서 하위 집합이라고 함)를 포함하는 JSON 형식으로 데이터를 제공합니다. API는 가족 목록을 알파벳순, 추가된 날짜, 스타일 수, 트렌드, 인기도별로 정렬할 수 있습니다.
대상
이 문서는 웹 및 애플리케이션 개발자를 대상으로 합니다. Developer API를 사용하려면 자바스크립트를 알고 있어야 합니다.
간단한 예
Google Fonts 서비스에서 제공하는 글꼴의 동적 목록을 가져오려면 다음 요청을 전송합니다.
https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY
결과 샘플은 다음과 같이 표시됩니다.
{
"kind": "webfonts#webfontList",
"items": [
[...]
{
"family": "Anonymous Pro",
"variants": [
"regular",
"italic",
"700",
"700italic"
],
"subsets": [
"cyrillic",
"greek",
"latin",
"latin-ext"
],
"version": "v21",
"lastModified": "2022-09-22",
"files": {
"regular": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2Bp2a15UIB7Un-bOeISG3pLlw89CH98Ko.ttf",
"italic": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2fp2a15UIB7Un-bOeISG3pHl428AP44Kqr2Q.ttf",
"700": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2cp2a15UIB7Un-bOeISG3pFuAT0CnW7KOywKo.ttf",
"700italic": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2ap2a15UIB7Un-bOeISG3pHl4OTCzc6IG30KqB9Q.ttf"
},
"category": "monospace",
"kind": "webfonts#webfont",
"menu": "http://fonts.gstatic.com/s/anonymouspro/v21/rP2Bp2a15UIB7Un-bOeISG3pHl028A.ttf"
},
{
"family": "Antic",
"variants": [
"regular"
],
"subsets": [
"latin"
],
"version": "v19",
"lastModified": "2022-09-22",
"files": {
"regular": "http://fonts.gstatic.com/s/antic/v19/TuGfUVB8XY5DRaZLodgzydtk.ttf"
},
"category": "sans-serif",
"kind": "webfonts#webfont",
"menu": "http://fonts.gstatic.com/s/antic/v19/TuGfUVB8XY5DRZZKq9w.ttf"
},
[...]
]
}
Google에 애플리케이션 식별
애플리케이션은 Google Fonts Developer API에 요청을 전송할 때마다 각 요청에 API 키를 포함하여 자체를 식별해야 합니다.
API 키 획득 및 사용
키 가져오기또는 사용자 인증 정보 페이지에서 만드세요.
API 키가 있으면 애플리케이션은 모든 요청 URL에 쿼리 매개변수 key=yourAPIKey를 추가할 수 있습니다.
API 키는 URL에 포함하기에 안전합니다. 인코딩이 전혀 필요하지 않습니다.
세부정보
JSON 응답 (위 샘플 참고)은 각 글꼴 모음에 관한 정보가 있는 'items'라는 배열로 구성됩니다.
가족 객체는 다음 필드로 구성됩니다.
- 종류: 객체의 유형, 웹폰트 객체
- family: 계열의 이름입니다.
- 하위 집합: 계열에서 지원되는 스크립트 목록
- 메뉴: 계열 이름만 포함하는 가족 하위 집합에 대한 URL
- 옵션: 제품군에 사용할 수 있는 다양한 스타일
- version: 글꼴 모음 버전입니다.
- 축: 축 범위이며, 가변 글꼴에 대한 요청(아래 참조)에만 있습니다.
- lastModified: 글꼴 모음이 마지막으로 수정된 날짜 (형식: "yyyy-MM-dd")입니다.
- files: 사용 가능한 각 글꼴에 대해 글꼴 모음 파일 (지원되는 모든 스크립트 포함)
각 그룹의 정보를 결합하면 Fonts API 요청을 쉽게 만들 수 있습니다. 예를 들어 익명 Pro의 가족 객체 참조가 있다고 가정합니다.
[...]
var apiUrl = [];
apiUrl.push('https://fonts.googleapis.com/css?family=');
apiUrl.push(anonymousPro.family.replace(/ /g, '+'));
if (contains('italic', anonymousPro.variants)) {
apiUrl.push(':');
apiUrl.push('italic');
}
if (contains('greek', anonymousPro.subsets)) {
apiUrl.push('&subset=');
apiUrl.push('greek');
}
// url: 'https://fonts.googleapis.com/css?family=Anonymous+Pro:italic&subset=greek'
var url = apiUrl.join('');
[...]
정렬
가족 목록은 기본적으로 특정 순서 없이 반환됩니다. 하지만 정렬 매개변수를 사용하여 목록을 정렬할 수 있습니다.
https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity
가능한 정렬 값은 다음과 같습니다.
- alpha: 목록을 알파벳순으로 정렬
- date: 추가된 날짜 순으로 목록 정렬 (가장 최근의 글꼴이 추가되거나 업데이트된 날짜순)
- 인기도: 인기도에 따라 목록 정렬 (가장 인기 있는 가족 우선)
- style: 사용 가능한 스타일 수에 따라 목록을 정렬합니다 (대부분의 스타일이 먼저 표시됨).
- 인기: 사용량이 가장 많았던 계열을 기준으로 목록 정렬 (가족이 가장 먼저 증가함)
필터링
특정 가족 쿼리
https://www.googleapis.com/webfonts/v1/webfonts?family=family_name
그리스어 하위 집합을 지원하는 모든 가족 그룹
https://www.googleapis.com/webfonts/v1/webfonts?subset=subset_name
최적화
woff2 형식으로 압축된 글꼴 파일 검색
https://www.googleapis.com/webfonts/v1/webfonts?capability=WOFF2
가변 글꼴
가변 글꼴은 연속적인 스타일 범위를 제공합니다. 기본적으로 표준 위치에서 인스턴스화된 가변 글꼴의 경우 정적 글꼴 파일의 조합이 반환됩니다.
capaibility=VF가 설정되면 가변 글꼴 파일이 사용 가능한 축 범위 메타데이터와 함께 정적 파일 대신 반환됩니다. 샘플 예:
https://www.googleapis.com/webfonts/v1/webfonts?capaibility=VF
샘플 응답:
{
"kind": "webfonts#webfontList",
"items": [
[...]
{
"family": "Noto Sans Display",
"variants": [
"regular",
"italic"
],
"subsets": [
"cyrillic",
"cyrillic-ext",
"greek",
"greek-ext",
"latin",
"latin-ext",
"vietnamese"
],
"version": "v20",
"lastModified": "2022-09-22",
"files": {
"regular": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLplK4fy6r6tOBEJg0IAKzqdFZVZxokvfn_BDLxR.ttf",
"italic": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLpjK4fy6r6tOBEJg0IAKzqdFZVZxrktdHvjCaxRgew.ttf"
},
"category": "sans-serif",
"kind": "webfonts#webfont",
"menu": "http://fonts.gstatic.com/s/notosansdisplay/v20/RLpbK4fy6r6tOBEJg0IAKzqdFZVZxpMkXJMhnB9XjO1o90LuV-PT4Doq_AKp_3cKZTCa3g.ttf",
"axes": [
{
"tag": "wdth",
"start": 62.5,
"end": 100
},
{
"tag": "wght",
"start": 100,
"end": 900
}
]
},
[...]
]
}
API URL 사양
webfonts?key=<your_key>[&family=<family>][&subset=<subset>][&capability=<capability>...][&sort=<sort>]
your_key: 개발자 API 키입니다.
family: 글꼴 모음의 이름입니다.
subset: 글꼴 하위 집합의 이름
capability: VF | WOFF2
sort: alpha | date | popularity | style | trending.