Zenn
😸

Webフォント使用時のレンダリングのチラつきが気になるので直したいときの対処法

2024/11/13に公開
Google Fonts
webfont
tech

Web Font Loader 実装ガイド

📘 概要

Webフォントを使用すると、ページ読み込み時に一時的にシステムのデフォルトフォントが表示され、その後Webフォントに切り替わる現象があります。この現象は「FOUT（Flash of Unstyled Text）」と呼ばれています。

このフォント切り替わり時の視覚的なちらつきは、ユーザー体験を損なう可能性があります。今回は、このFOUTによる表示のちらつきを最小限に抑え、スムーズなフォント表示を実現するための具体的な対策方法をご紹介します。

📕 解決

Web Font Loaderは、GoogleとTypekitが共同開発したJavaScriptライブラリで、Webフォントの読み込みを制御するためのツールを使います。なお、Googleが開発したからと言ってGoogle PageSpeed Toolsでも推奨と書かれている情報もありますが、調べてもソースが見当たらなかったのであれば教えて下さい😂

※注意点

Webフォントの表示方法、特にFOUT（Flash of Unstyled Text）への対応については、Web開発者の間でも見解が分かれます。一方では、ユーザー体験を重視し、フォントの切り替わりによる視覚的な不安定さを避けたいという意見があります。他方では、コンテンツの即時表示を優先し、一時的にデフォルトフォントでも良いから素早くテキストを表示すべきという考えもあります。

今回は前者の方針を取った場合の方法になります。

📘 サンプル

🔑 主な特徴

  • フォントの読み込み状態の管理が可能
  • FOUTやFOIT（Flash of Unstyled Text/Flash of Invisible Text）の制御
  • 複数のWebフォントプロバイダーに対応
  • CSSクラスを使用した読み込み状態に応じたスタイリング

💻 基本的な実装方法

1. スクリプトの読み込み

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>

2. フォントの読み込み設定

WebFont.load({
  google: {
    families: ['Noto Sans JP:400,700'],
    display: 'swap'
  },
  loading: function() {
    console.log('フォント読み込み中...');
  },
  active: function() {
    console.log('フォント読み込み完了');
  },
  inactive: function() {
    console.log('フォント読み込み失敗');
  }
});

3. CSS設定例

/* Web Font Loader用のスタイル */
.with-loader .sample-text {
  visibility: hidden;
}

.wf-loading .with-loader .sample-text {
  visibility: hidden;
}

.wf-active .with-loader .sample-text {
  visibility: visible;
  font-family: 'Noto Sans JP', sans-serif;
}

.wf-inactive .with-loader .sample-text {
  visibility: visible;
}

📝 可変ウェイトフォントの指定方法

全ウェイトを指定する場合

WebFont.load({
  google: {
    families: ['Noto Sans JP:100..900']  // 可変ウェイト全範囲
  }
});

必要なウェイトのみ指定（推奨）

WebFont.load({
  google: {
    families: ['Noto Sans JP:400,500,700']  // 使用するウェイトのみ
  }
});

サブセットと表示方法の指定

WebFont.load({
  google: {
    families: ['Noto Sans JP:400,700:japanese'],  // 日本語サブセット
    display: 'swap'  // font-display: swap相当
  }
});

⚡ 実装のポイント

@importとの関係

  • Web Font Loader使用時は@importやlink要素でのフォント読み込みは不要
  • Web Font Loader側で一元管理することでパフォーマンスが向上

読み込み状態の種類

  • loading: フォントの読み込み中
  • active: フォントの読み込み完了
  • inactive: フォントの読み込み失敗
  • wf-loading: フォント読み込み中のCSSクラス
  • wf-active: フォント読み込み完了のCSSクラス
  • wf-inactive: フォント読み込み失敗のCSSクラス

パフォーマンス最適化のためのベストプラクティス

  1. 必要なウェイトのみを指定
  2. 適切なサブセットの使用
  3. display: swapの指定
  4. 読み込み状態に応じた適切な表示制御

📚 参考情報

Discussion