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: オブジェクトの種類、webfont オブジェクト
- family: ファミリーの名前
- サブセット: ファミリーでサポートされるスクリプトのリスト
- メニュー: ファミリー グループの名前の URL のみです。
- バリエーション: ファミリーのバリエーションです。
- version: フォント ファミリーのバージョン。
- 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: リストをアルファベット順に並べ替え
- date: 追加日(新しいフォントが最初に追加または更新されたフォント)を基準としてリストを並べ替える
- 人気度: リストを人気順で並べ替え(人気順)
- スタイル: 利用可能なスタイルの数(多くのスタイルがあるファミリー)を基準にリストを並べ替えます
- 急上昇: 使用量の増加が見られるファミリー(最も増加しているファミリー)で並べ替え
フィルタリング
特定のファミリーに対してクエリを実行する
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
。