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

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 を使用する

オブザーバーの作成

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

  • 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");

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

✔️ チェックイン

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

<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 が正常に実装され、「非表示テキストのフラッシュ」は削除されています。

手書きフォントの見出し。