Developer API는 Google Fonts에서 제공하는 모든 패밀리의 메타데이터에 대한 액세스 권한을 부여합니다. 앱에서 사용 가능한 글꼴 모음의 Google Fonts를 쿼리할 수 있습니다. REST API는 각 계열에 스타일과 스크립트(Google Fonts의 하위 집합이라고 함)가 포함된 JSON 형식으로 데이터를 제공합니다. API는 알파벳순, 추가된 날짜, 스타일 수, 트렌드 또는 인기도에 따라 계열 목록을 정렬할 수 있습니다.
대상
이 문서는 웹 및 애플리케이션 개발자를 대상으로 합니다. Developer API를 사용하려면 JavaScript에 관한 지식이 필요합니다.
간단한 예
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에 애플리케이션 확인
애플리케이션은 각 요청에 API 키를 포함하여 Google Fonts Developer API에 요청을 전송할 때마다 자신을 식별해야 합니다.
API 키 획득 및 사용
키 가져오기또는 사용자 인증 정보 페이지에서 만드세요.
API 키가 있으면 애플리케이션은 모든 요청 URL에 쿼리 매개변수 key=yourAPIKey를 추가할 수 있습니다.
API 키는 URL에 포함하기에 안전합니다. 인코딩이 전혀 필요하지 않습니다.
세부정보
JSON 응답 (위 샘플 참조)은 각 글꼴 모음에 대한 정보가 있는 객체를 포함하는 'items'라는 배열로 구성됩니다.
계열 객체는 다음 필드로 구성됩니다.
- kind: 객체의 종류, 웹 글꼴 객체
- 가족: 가족의 이름
- 하위 집합: 제품군에서 지원하는 스크립트의 목록
- 메뉴: 제품군 이름만 포괄하는 가족 하위 집합의 URL입니다.
- 변형: 계열에 사용할 수 있는 다양한 스타일
- version: 글꼴 모음 버전
- 축: 축 범위. 가변 글꼴에 대한 요청 시에만 표시됩니다(아래 참조).
- lastModified: 글꼴 모음이 마지막으로 수정된 날짜 (형식: 'yyyy-MM-dd')
- 파일: 사용 가능한 각 변형의 글꼴 모음 파일 (지원되는 모든 스크립트 포함).
각 계열의 정보를 결합하면 Fonts API 요청을 쉽게 만들 수 있습니다. 예를 들어 익명 프로의 가족 객체에 대한 참조가 있다고 가정해 보겠습니다.
[...]
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: 알파벳순으로 목록 정렬
- 날짜: 추가된 날짜 (가장 최근에 추가되거나 업데이트된 글꼴이 먼저 표시됨)를 기준으로 목록을 정렬합니다.
- 인기도: 인기도순으로 목록을 정렬합니다 (가장 인기있는 제품부터).
- 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
가변 글꼴
가변 글꼴은 연속적인 스타일 범위를 제공합니다. 기본적으로 표준 위치에 인스턴스화된 가변 글꼴에는 정적 글꼴 파일의 조합이 반환됩니다.
capability=VF가 설정되면 사용 가능한 축 범위 메타데이터와 함께 정적 글꼴 파일 대신 가변 글꼴 파일이 반환됩니다. 샘플 예는 다음과 같습니다.
https://www.googleapis.com/webfonts/v1/webfonts?capability=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.