このドキュメントでは、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 のように動作させることができます。