目に見えないテキストの点滅を避ける

Katie Hempenius
Katie Hempenius
X

この Codelab では、Font Face Observer を使用してテキストをすぐに表示する方法について説明します。

Font Face Observer を追加する

Font Face Observer は、フォントが読み込まれたときに検出するスクリプトです。fontfaceobserver.js ファイルはすでにプロジェクト ディレクトリに保存されているため、別途追加する必要はありません。ただし、スクリプトタグを追加する必要があります。

  • [Remix to Edit] をクリックして、プロジェクトを編集可能にします。
  • fontfaceobserver.js のスクリプトタグを index.html に追加します。
  <div class="text">Some text.</div>
  <script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

Font Face Observer を使用する

Observer を作成する

ページで使用されているフォント ファミリーごとにオブザーバーを作成します。

  • fontfaceobserver.js スクリプトの後に次のスクリプトを追加します。これにより、「Pacifico」と「Roboto」のフォント ファミリーのオブザーバーが作成されます。
  <script src="fontfaceobserver.js" type="text/javascript"></script>
  <script type="text/javascript">
    const pacificoObserver = new FontFaceObserver('Pacifico');
    const robotoObserver = new FontFaceObserver('Roboto');
  </script>
<body>

作成する必要があるフォントフェイス オブザーバーが不明な場合は、CSS で font-family 宣言を探してください。これらの宣言の font-family 名を FontFaceObserver() に渡します。フォールバック フォントのフォント オブザーバーを作成する必要はありません。

たとえば、CSS が次のように設定されているとします。

font-family: "Times New Roman", Times, serif;

FontFaceObserver('Times New Roman') を追加します。Times と serif はフォールバック フォントであるため、FontFaceObserver を宣言する必要はありません。

フォント読み込みを検出する

フォント読み込みを検出するコードは次のようになります。

robotoObserver.load().then(function(){
  console.log("Hooray! Font loaded.");
});

robotoObserver.load() は、フォントが読み込まれたときに解決される Promise です。

デモサイトでは 2 つの異なるフォントが使用されているため、Promise.all() を使用して、両方のフォントが読み込まれるまで待つ必要があります。

  • 宣言した FontFaceObserver のすぐ下に、次の Promise をスクリプトに追加します。
Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});

✔️チェックイン

スクリプトは次のようになります。

<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');

Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});
</script>

fonts-loaded クラスを適用する

  • スクリプトの /* Do things */ コメントを次の行に置き換えます。
document.documentElement.classList.add("fonts-loaded");

これにより、両方のフォントが読み込まれると、ドキュメントのルート要素（<html> タグ）に fonts-loaded クラスが追加されます。

✔️チェックイン

完成したスクリプトは次のようになります。

<script type="text/javascript">
  const pacificoObserver = new FontFaceObserver('Pacifico');
  const robotoObserver = new FontFaceObserver('Roboto');

  Promise.all([
    pacificoObserver.load(),
    robotoObserver.load()
  ]).then(function(){
    document.documentElement.className += " fonts-loaded";
  });
</script>

CSS を更新する

ページのスタイル設定は、最初はシステム フォントを使用し、fonts-loaded クラスが適用されたらカスタム フォントを使用するようにする必要があります。

  • CSS を更新します。
.header {
html.fonts-loaded .header {
  font-family: 'Pacifico', cursive;
}

.text
html.fonts-loaded .text {
  font-family: 'Roboto', sans-serif;
}

確認

  • サイトをプレビューするには、[アプリを表示] を押してから、[全画面表示] 全画面表示 を押します。

ページが次のように表示されたら、Font Face Observer が正常に実装され、「見えないテキストのフラッシュ」が解消されています。

筆記体フォントで表示された見出し。