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

技術的な考慮事項

このドキュメントでは、 Google Fonts API でウェブフォントをリクエストしたときに、シーンで認識されるようにしました。

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

Fonts API を使用するだけの場合は、このページを読む必要はありません。このページを読むことで、ページ読み込みのパフォーマンスが向上する場合があります。

Google Fonts API はどのように機能しますか？

ブラウザから Fonts API スタイルシート（ <link> タグ）を渡すと、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 のように動作するようにします。