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에 애플리케이션 식별
애플리케이션은 Google Fonts Developer API에 요청을 보낼 때마다 각 요청에 API 키를 포함하여 자신을 식별해야 합니다.
API 키 획득 및 사용
키 가져오기또는 사용자 인증 정보 페이지에서 만드세요.
API 키가 있으면 애플리케이션은 모든 요청 URL에 쿼리 매개변수 key=yourAPIKey를 추가할 수 있습니다.
API 키는 URL에 포함하기에 안전합니다. 인코딩이 전혀 필요하지 않습니다.
세부정보
JSON 응답 (위 샘플 참고)은 각 글꼴 패밀리에 관한 정보가 포함된 객체가 포함된 'items'라는 배열로 구성됩니다.
가족 객체는 다음 필드로 구성됩니다.
- kind: 객체의 종류, 웹폰트 객체
- family: 가족 이름
- 하위 집합: 패밀리에서 지원하는 스크립트 목록
- menu: 가족의 이름만 포함하는 가족 하위 집합의 URL입니다.
- variants: 제품군에 사용할 수 있는 다양한 스타일
- 버전: 글꼴 모음 버전입니다.
- axes: 축 범위입니다. 가변 글꼴의 경우 요청 시만 표시됩니다(아래 참고).
- lastModified: 글꼴 모음이 마지막으로 수정된 날짜('yyyy-MM-dd' 형식)입니다.
- files: 사용 가능한 각 변형의 글꼴 모음 파일 (지원되는 모든 스크립트 포함)입니다.
각 가족의 정보를 결합하면 Fonts API 요청을 쉽게 만들 수 있습니다. 예를 들어 Anonymous 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('');
[...]
정렬
가족 목록은 기본적으로 특정 순서 없이 반환됩니다. 그러나 sort 매개변수를 사용하여 목록을 정렬할 수 있습니다.
https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity
가능한 정렬 값은 다음과 같습니다.
- alpha: 목록을 알파벳순으로 정렬합니다.
- 날짜: 추가된 날짜순으로 목록을 정렬합니다 (가장 최근에 추가되거나 업데이트된 글꼴이 먼저 표시됨).
- popularity: 인기도순으로 목록 정렬 (가장 인기 있는 가족 먼저)
- style: 사용 가능한 스타일 수를 기준으로 목록을 정렬합니다 (스타일이 가장 많은 가족이 먼저 표시됨).
- 인기 급상승: 사용량이 증가한 가족을 기준으로 목록을 정렬합니다 (사용량이 가장 많이 증가한 가족이 먼저 표시됨).
필터링
특정 가족 쿼리
https://www.googleapis.com/webfonts/v1/webfonts?family=family_name
그리스어 하위 집합을 지원하는 모든 가족
https://www.googleapis.com/webfonts/v1/webfonts?subset=subset_name
글꼴 카테고리별로 필터링
https://www.googleapis.com/webfonts/v1/webfonts?category=category_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: 글꼴 하위 집합의 이름입니다.
category: serif | sans-serif | monospace | display | handwriting
capability: VF | WOFF2.
sort: alpha | date | popularity | style | trending