Google Fonts CSS API を使用してウェブフォントを効率的に提供する方法
ここ数年で、ウェブフォントの技術は大きく変化しました。テキストの画像や Flash プラグインが必要だった（そして、ウェブサイトの検索エンジン最適化を阻害した）ニッチな手法が、今ではウェブ全体で一般的に行われています。かつては、ページを読み込む前にフォント全体を読み込まなければならなかったことがありました。スタイルや文字を使用したこともないかもしれませんが、それも過去のこととなりました。
Google Fonts CSS API も、ウェブフォント技術の変化に対応するために長年にわたって進化してきました。当初の価値提案から大きく進化しました。それは、API を使用するすべてのウェブサイトで一般的に使用されるフォントをブラウザでキャッシュできるようにすることで、ウェブを高速化するというものです。これは現在は当てはまっていませんが、ウェブサイトの読み込みが速くなり、フォントが適切に機能するよう、API によって重要な最適化機能が追加で提供されています。
Google Fonts CSS API を使用すると、ウェブサイトは CSS の読み込み時間を最小限に抑えるために必要なフォントデータのみをリクエストできるため、ウェブサイトの訪問者はコンテンツをできるだけ早く読み込むことができます。API は各リクエストに対して、そのウェブブラウザに最適なフォントを使用して応答します。
これはすべて、1 行の HTML をコードに含めることで行われます。
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 日本語の重みはたった 1 つだけで、約 3.4 MB です。これをユーザー 1 人 1 人にダウンロードするだけでも、ページの読み込み時間が長くなります。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 を使用します。
この例では、CSS API を使用することで、WOFF2 フォントを自己ホストする場合と比べて、すでに 97.5% の節約になっていることがわかります。これは、大きなフォントを Unicode 範囲に分割する API の組み込みサポートのおかげです。これをさらに一歩進めて、表示するテキストを正確に指定することで、フォントのサイズをさらに縮小し、CSS API フォントの 95.3% に抑えることができます。これは、自己ホスト型フォントよりも 99.9% 小さくなります。
Google Fonts CSS API では、ユーザーのブラウザでサポートされている最小かつ最も互換性のある形式のフォントが自動的に配信されます。ユーザーが WOFF2 対応のブラウザを使用している場合、API は WOFF2 のフォントを提供しますが、古いブラウザを使用している場合、API はそのブラウザでサポートされている形式でフォントを提供します。また、各ユーザーのファイルサイズを減らすために、API は不要な場合はフォントからデータを削除します。たとえば、ヒント情報のデータを必要としないブラウザでは削除されます。
Google Fonts CSS API を使用して将来を見据えたウェブフォントを作成する
また、Google Fonts チームは WOFF2 などのウェブフォント技術の革新を続けている新しい W3C 標準にも貢献しています。現在のプロジェクトの一つに Incremental Font Transfer があります。これは、フォント ファイルのごく一部を画面で使用するときに読み込み、残りの部分をオンデマンドでストリーミングして、Unicode 範囲のパフォーマンスを超える機能です。Web Fonts API を使用すると、ブラウザで利用できるようになると、基盤となるフォント転送技術が改善されます。
これが Fonts API の優れた点です。ユーザーはウェブサイトに変更を加えることなく、新しいテクノロジーが改善するたびにメリットを得ることができます。新しいウェブフォント形式心配はいりません。新しいブラウザまたはオペレーティング システムのサポート対応してくれる。そのため、ウェブフォントのメンテナンスにとらわれることなく、ユーザーとコンテンツに集中できます。
可変フォントでは
可変フォントは、複数の軸間でさまざまなデザインのバリエーションを保存できるフォント ファイルです。Google Fonts CSS API の新しいバージョンでは、そのようなフォントがサポートされています。バリエーションの軸を追加するとフォントの柔軟性が向上しますが、フォント ファイルのサイズはほぼ 2 倍になります。
CSS API リクエストをより具体的に指定する場合、Google Fonts CSS API では、ユーザーのダウンロード サイズを減らすために、ウェブサイトに必要な可変フォントの一部のみを提供できます。これにより、ページの読み込みに時間がかかることなく、ウェブで可変フォントを使用できるようになります。これを行うには、軸に 1 つの値を指定するか、範囲を指定します。複数の軸と複数のフォント ファミリーをすべて 1 回のリクエストで指定することもできます。API はニーズに合わせて柔軟に対応します。
導入が簡単で、お客様に合わせて最適化
Google Fonts CSS API を使用すると、次のようなフォントを提供できます。
- ウェブブラウザとの互換性が高い。
- できる限り小さくしてください。
- 迅速な配送。
- 使いやすく。
Google Fonts について詳しくは、fonts.google.com をご覧ください。CSS API について詳しくは、API ドキュメントをご覧ください。
謝辞
ヒーロー画像（作成者: leesehee）。