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
.