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

技術的な考慮事項

このドキュメントでは、Google Fonts API を使用してウェブフォントをリクエストする際の舞台裏の技術情報について説明します。

このドキュメントでは、ブラウザ固有の動作についても説明します。

Fonts API を使用するだけの場合は、このページを読む必要はありません。ただし、このページを読むとページの読み込み速度が改善する可能性があります。

Google Fonts API とは何ですか？

ブラウザが（ウェブページの <link> タグで指定されている）Fonts API スタイルシートのリクエストを送信すると、Fonts API が、リクエストを行う特定のユーザーエージェント用に生成されたスタイルシートを提供します。

たとえば、Firefox から Inconsolata をリクエストすると、次の CSS が返されます。

@font-face {
  font-family: 'Inconsolata';
  src: local('Inconsolata'), url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw') format('truetype');
}

一方、Internet Explorer からのリクエストの場合は、次のレスポンスが返されます。

@font-face {
  font-family: 'Inconsolata';
  src: url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw');
}

CSS をダウンロードすると、ブラウザに合った形式でフォントがダウンロードされます。

ブラウザ固有の動作

このセクションでは、各ブラウザのデフォルトウェブフォントの動作について説明します。この動作は、ウェブフォントローダーを使用して制御できます。

サポートされているブラウザの一覧については、よくある質問をご覧ください。

Google Chrome

Chrome はページの残りの部分をレンダリングしますが、フォントが読み込まれるまで、フォントを使用するテキストの代わりに空白スペースが表示されます。

Mozilla Firefox

Firefox では、まずデフォルトのフォントでテキストを表示し、読み込み後にフォントでテキストを再レンダリングします。この動作は「スタイルなしテキストのフラッシュ」と呼ばれます。

Apple Safari

Safari はページの残りの部分をレンダリングしますが、フォントが読み込まれるまで、フォントを使用するテキストの代わりに空白スペースが表示されます。

Microsoft Internet Explorer

Internet Explorer はページの残りの部分をレンダリングしますが、フォントが読み込まれるまで、フォントを使用するテキストの代わりに空白スペースが表示されます。

より一般的には、Internet Explorer の動作はさまざまな要素の配置や存在によって異なります。すべてのブラウザで一貫した動作を実現するには、ウェブフォントローダーを使用します。たとえば、すべてのブラウザを Firefox のように動作させることができます。