このページは Cloud Translation API によって翻訳されました。

高速で美しいウェブフォントを実現する API

Google Fonts CSS API を使用してウェブフォントを効率的に配信する方法

Jimmy Mooney

長い年月を経て、ウェブフォント技術は大きく変化しました。かつてはテキストの画像や Flash プラグインを必要とするニッチな手法（ウェブサイトの検索エンジン最適化を損なう）でしたが、現在ではウェブ全体で標準的な手法になっています。かつては、ページの読み込み前にフォント全体を読み込む必要がありました。使用しないスタイルや文字が含まれている場合もありましたが、今ではそのようなこともなくなりました。

Google Fonts CSS API も、ウェブフォント技術の進化に合わせて長年にわたって進化してきました。Google Fonts は、API を使用しているすべてのウェブサイトで、ブラウザがよく使用されるフォントをキャッシュに保存することでウェブを高速化するという、当初の価値提案から大きく進化しました。これはもはや当てはまりませんが、API は引き続き、ウェブサイトの高速読み込みとフォントの適切な動作を実現するための追加の最適化を提供します。

Google Fonts CSS API を使用すると、ウェブサイトは CSS の読み込み時間を最小限に抑えるために必要なフォントデータのみをリクエストできるため、ウェブサイト訪問者がコンテンツをできるだけ早く読み込めるようになります。API は、各リクエストに対して、そのウェブブラウザに最適なフォントで応答します。

これは、コードに HTML を 1 行含めるだけで実現できます。

Google Fonts CSS API を使用する方法

Google Fonts の CSS API のドキュメントに、この説明がよくまとめられています。

プログラミングは必要ありません。HTML ドキュメントに特別なスタイルシートリンクを追加し、CSS スタイルでフォントを参照するだけです。

最低限必要なのは、HTML に 1 行追加することです。次に例を示します。

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />

API からフォントをリクエストする際は、使用するフォントファミリーを指定し、必要に応じて、その太さ、スタイル、サブセット、その他のオプションを指定します。API は、次のいずれかの方法でリクエストを処理します。

API にすでに存在するファイルがある共通パラメータをリクエストで使用する場合は、すぐに CSS が返され、これらのファイルに誘導されます。
API に現在キャッシュに保存されていないパラメータを使用してフォントをリクエストした場合、HarfBuzz を使用してフォントをオンザフライでサブセット化し、それらを指す CSS を返します。

フォントファイルは大きくてもかまいませんが、大きくする必要はありません

ウェブフォントはサイズが大きい場合があります。WOFF2 の Noto Sans Japanese の 1 つのウェイトだけで 3.4 MB 近くになります。これをすべてのユーザーにダウンロードすると、ページの読み込み時間が長くなります。1 ミリ秒、1 バイトでも貴重な場合は、ユーザーに必要なデータのみを読み込むようにする必要があります。

Google Fonts CSS API を使用すると、非常に小さなフォントファイル（サブセット）をリアルタイムで生成して、ウェブサイトに必要なテキストとスタイルのみをユーザーに提供できます。フォント全体を提供する代わりに、text パラメータを使用して特定の文字をリクエストできます。

<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />

基本ラテン語、基本ギリシャ語、拡張ギリシャ語の文字数のグラフ。

CSS API は、API パラメータなしで、ウェブフォントに関する追加の最適化をユーザーに自動的に提供します。この API は、unicode-range がすでに有効になっている CSS ファイルをユーザーに提供するため（ウェブブラウザでサポートされている場合）、ウェブサイトに必要な特定の文字のみのフォントを読み込みます。

大規模なフォントダウンロードに対処するために使用できるツールの一つが、unicode-range CSS 記述子です。この CSS プロパティは、@font-face 宣言に含まれる Unicode 文字の範囲を設定します。これらの文字のいずれかがページにレンダリングされると、そのフォントがダウンロードされます。これはあらゆる言語に適しているため、ラテン文字、ギリシャ文字、キリル文字を含むフォントから、より小さなサブセットを作成できます。上のグラフを見ると、これらの 3 つの文字セットをすべて読み込むと、600 を超えるグリフが必要になることがわかります。

基本ラテン文字、拡張ラテン文字、韓国語、日本語の文字数を示すグラフ。

また、ウェブで中国語、日本語、韓国語（CJK）のフォントを使用できるようになります。上のグラフは、CJK フォントがラテン文字フォントよりも 15～20 倍の文字数をカバーしていることを示しています。これらのフォントは通常非常に大きく、それらの言語の文字の多くは他の言語ほど頻繁に使用されません。

CSS API と unicode-range を使用すると、ファイル転送を約 90% 削減できます。unicode-range 記述子を使用すると、各部分を個別に定義できます。各スライスは、コンテンツにこれらの文字範囲のいずれかの文字が含まれている場合にのみダウンロードされます。

例: Noto Sans JP で「こんにちは」という単語のみを設定するには、次のようにします。

独自の WOFF2 ファイルをセルフホストする。
CSS API を使用して WOFF2 を取得します。
text= パラメータを「こんにちは」に設定して CSS API を使用します。

Noto Sans JP のダウンロード方法を比較したグラフ。

この例では、CSS API を使用すると、大きなフォントを Unicode 範囲に分割する API の組み込みサポートにより、WOFF2 フォントをセルフホストする場合と比較して 97.5% の節約がすでに実現していることがわかります。さらに一歩進んで、表示するテキストを正確に指定すると、フォントサイズを CSS API フォントの 95.3% まで縮小できます。これは、セルフホストフォントよりも 99.9% 小さいサイズです。

Google Fonts CSS API を使用すると、ユーザーのブラウザでサポートされている最小かつ互換性のある形式で、フォントが自動的に配信されます。ユーザーが WOFF2 をサポートするブラウザを使用している場合は、API は WOFF2 でフォントを提供しますが、古いブラウザを使用している場合は、そのブラウザでサポートされている形式でフォントを提供します。また、各ユーザーのファイルサイズを削減するため、API は不要なときにフォントからデータを削除します。たとえば、ブラウザでヒントデータを必要としないユーザーに対しては、ヒントデータが削除されます。

Google Fonts CSS API でウェブフォントを将来に備えてアップデートする

Google Fonts チームは、WOFF2 などのウェブフォント技術の継続的な革新を目的とした新しい W3C 標準にも貢献しています。現在のプロジェクトの 1 つがインクリメンタルフォント転送です。これにより、ユーザーは画面で使用されるフォントファイルのごく一部を読み込み、残りはオンデマンドでストリーミングできるため、unicode-range のパフォーマンスを上回ります。Google のウェブフォント API を使用すると、ユーザーはブラウザでこれらの基盤となるフォント転送技術の改善を利用できるようになります。

これが fonts API の優れた点です。ウェブサイトを変更することなく、ユーザーは新しい技術の進歩の恩恵を受けることができます。新しいウェブフォント形式ですか？、新しいブラウザやオペレーティングシステムのサポートは？対応済みです。ウェブフォントのメンテナンスに時間を取られることなく、ユーザーとコンテンツに集中できます。

可変フォントサポートが組み込まれている

可変フォントは、複数の軸にさまざまなデザインのバリエーションを保存できるフォントファイルです。Google Fonts CSS API の新しいバージョンでは、可変フォントがサポートされています。バリエーションの軸を追加すると、フォントに柔軟性を持たせることができますが、フォントファイルのサイズがほぼ 2 倍になります。

CSS API リクエストをより限定的に指定すると、ユーザーのダウンロードサイズを減らすために、Google Fonts CSS API はウェブサイトが必要とする可変フォントの一部のみを配信できます。これにより、ページの読み込み時間を長くすることなく、ウェブで可変フォントを使用できます。これを行うには、軸に単一の値を指定するか、範囲を指定します。1 つのリクエストで複数の軸と複数のフォントファミリーを指定することもできます。この API は、ニーズに合わせて柔軟に使用できます。

実装が簡単で、自動的に最適化される

Google Fonts CSS API を使用すると、次のようなフォントを提供できます。

ウェブブラウザとの互換性が向上。
できるだけ小さくします。
迅速に配信されます。
使いやすくなるように。

Google Fonts の詳細については、fonts.google.com をご覧ください。CSS API の詳細については、API のドキュメントをご覧ください。

謝辞

leesehee さんのヒーロー画像。