Skip to content
学習する 測定する ブログ Case studies 概要
このページ内
  • すぐにテキストを表示する
  • オプション#1:font-displayを使用する
  • オプション#2:カスタムフォントが読み込まれる後の使用を待機する
  • 確認

フォントの読み込み中にテキストが非表示されることを避ける

Nov 5, 2018
Available in: Español, 한국어, Português, Русский, 中文, English
Appears in: 読み込み時間の高速化
Katie Hempenius
Katie Hempenius
TwitterGitHubGlitchHomepage
このページ内
  • すぐにテキストを表示する
  • オプション#1:font-displayを使用する
  • オプション#2:カスタムフォントが読み込まれる後の使用を待機する
  • 確認

なぜこの点を配慮する必要がありますか? #

フォントは普段、大きなファイルで読み込みに時間がかかります。これに対処するために、一部のブラウザは、フォントが読み込まれるまでテキストを非表示にします(非表示のテキストのフラッシュ)。パフォーマンスを最適化する目的で、「非表示のテキストのフラッシュ」を避けて、(スタイルのないテキストのフラッシュ)システムフォントを使用してユーザーにすぐにコンテンツを表示することを希望するかもしれません。

すぐにテキストを表示する #

このガイドでは、これを実現する2つの方法を説明します。最初のアプローチは非常に簡単ですが、ユニバーサルブラウザがサポートしてもらいません。 2番目のアプローチはより多くの作業が必要ですが、ブラウザが完全にサポートしてもらいます。最良の選択は、実際に実装して維持するものです。

オプション#1:font-displayを使用する #

前後
@font-face { font-family: Helvetica; } @font-face { font-family: Helvetica; font-display: swap; }

font-displayは、フォント表示戦略を指定するためのAPIです。 swapは、システムフォントを使用して、このフォントを使用するテキストがすぐに表示される必要があるようとブラウザに通知します。カスタムフォントの準備ができたら、システムフォントが交換されます。

ブラウザはfont-displayサポートしていない場合、フォントの読み込みのためのデフォルトの動作にフローし続けます。こちらでfont-displayサポートしているブラウザを確認してください。

下記は、一般的なブラウザのデフォルトのフォント読み込み動作です。

ブラウザフォントの準備ができていない場合はデフォルトの動作が…
Edgeフォントの準備ができあがるまでシステムフォントを使用します。フォントを交換します。
Chrome3秒以内でテキストを非表示にします。それでもテキストの準備ができていない場合は、フォントの準備ができるまでシステムフォントを使用します。フォントを交換します。
Firefox3秒以内でテキストを非表示にします。それでもテキストの準備ができていない場合は、フォントの準備ができるまでシステムフォントを使用します。フォントを交換します。
Safariフォントの準備ができるまでテキストを非表示にします。

オプション#2:カスタムフォントが読み込まれる後の使用を待機する #

もう少し作業を行うことで、すべてのブラウザで機能するように同じ動作を実装できます。

このアプローチには3つの部分があります。

  • 最初のページ読み込み時にカスタムフォントを使用しないでください。これにより、ブラウザはシステムフォントを使用してテキストをすぐに表示できます。
  • カスタムフォントが読み込まれる時点を検出します。これは、FontFaceObserverライブラリのおかげで、数行のJavaScriptコードで実現できます。
  • カスタムフォントを使用できようにページスタイルを更新します。

これを実装するために実施する必要である変更は次のとおりです。

  • 最初のページの読み込み時にカスタムフォントを使用しないように、CSSをリファクタリングすること。
  • ページにスクリプトを追加すること。このスクリプトでは、カスタムフォントが読み込まれたことを検出して、ページのスタイルを更新します。

お試しください

Font Face Observerを使用して、テキストをすぐに表示します。

確認 #

Lighthouseの実行により、サイトがテキストを表示するためにfont-display: swapを使用していることを確認できます。

  1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
  2. Click the Lighthouse tab.
  3. Make sure the Performance checkbox is selected in the Categories list.
  4. Click the Generate report button.

Webフォントの読み込み監査に合格したら、テキストが表示されたままであることを確認します。

パフォーマンス
最終更新: Nov 5, 2018 — 記事を改善する
Codelabs

See it in action

Learn more and put this guide into action.

  • Avoid flash of invisible text
Return to all articles
共有する
サブスクライブする

Contribute

  • バグを報告する
  • ソースを表示する

関連性のあるコンテンツ

  • developer.chrome.com
  • Chrome のアップデート
  • Web Fundamentals
  • ケーススタディ
  • ポッドキャスト
  • ショー

接続する

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • すべての製品
  • 利用規約とプライバシーポリシー
  • コミュニティガイドライン

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.