技術的な考慮事項

このドキュメントでは、 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 のように動作するようにします