トラブルシューティング

Webフォントの表示が遅いとき

ページに反映したWebフォントがすぐに表示されない現象の確認と対応方法をお知らせします。

Webフォントの表示速度は、ページを置いているサーバやページ内で表示させているコンテンツ内容が影響することがあります。どのような要因でWebフォントの表示が遅くなっているかを確認するため、下記のa〜cを見直してみましょう。

  • a:CSSで同じフォント名を2つ指定していないか
  • b:閲覧環境(回線速度、OS、ハードウェア)はどんな状況か
  • c:ページのコンテンツ(JS、画像データなど)のファイル容量、数が多くないか

a:CSSで同じフォント名を2つ指定していないか

日本語と英文で同じフォントを指定している場合、それぞれに対しサブセット処理を行い、同じフォントデータが2つ生成されるため、処理時間及びフォントデータの配信時間が2重にかかってしまいます。

font-family: "FOT-マティス Pro B","MatissePro-B";

そこで、どちらか1つのフォント名を削除してください。

font-family: "FOT-マティス Pro B";

b:閲覧環境(回線速度、OS、ハードウェア)はどんな状況か

HTMLやCSS、画像データなどを置いているサーバの処理速度が遅いと、Webフォントを取得するまでに時間がかかり、表示速度も遅くなってしまいます。以下をチェックしてみてください。

  • サーバの回線速度、使用帯域の確認
  • サーバーおよびアプリケーション(ApacheやIISといったWebサーバーやデータベース)の設定
  • ハードウェアの消費・消耗・劣化による機能低下や、旧式等による性能不足

c:ページのコンテンツ(JS、画像データなど)のファイル容量、数が多くないか

Webページを表示するとき、一般的にブラウザは「HTML > CSS、JavaScript > 画像 > その他(Webフォントデータを含む)」の順番で必要なデータを読み込みます。つまり、HTML〜画像までの読み込みに時間がかかってしまうと、Webフォントの表示速度にも影響します。ページを構成するCSSやJavaScript、画像などのファイルについて、以下をチェックしてみてください。

  • ファイル数が多くないか
  • ファイルサイズの大きいものがないか