フォントファイルの欠落

Silktide は、ページから要求されているものの読み込みに失敗するフォントファイルを検出します。通常は、ファイルが移動または削除されたか、ウェブアドレスの入力を誤ったことが原因です。フォントの読み込みに失敗すると、テキストは代替フォントに置き換えられ、ページが意図したデザインどおりに表示されなくなります。

\/* このフォントファイルがない場合、テキストはフォールバックフォントで表示されます *\/
@font-face {
  font-family: "Brand Sans";
  src: url("\/fonts\/brand-sans.woff2") format("woff2");
}

重要な理由

タイポグラフィはブランドを表現します。カスタムフォントの読み込みに失敗すると、ブラウザーは気付かれないまま別のフォントに置き換えます。テキスト自体は表示されますが、間隔が変わったり、見出しの見た目が崩れたりします。また、アイコンフォントが意味のない四角形やランダムな文字に変わることもあり、単なる見た目の問題よりはるかに深刻です。

フォールバックがあるため、フォントの欠落はサイトの担当チーム自身も数か月間気付かないことがよくあります。その間、ファイルを参照するすべてのページで、訪問者のブラウザーはファイルを要求し、読み込みに失敗するまで待機する時間を無駄にします。

修正方法

欠落しているファイルへの参照を見つけます。通常は、内の @font-face ルール、またはフォントホスティングサービスから読み込まれるフォントです。
ファイルが移動した場合は、参照先を新しいアドレスに更新します。フォントを意図的に廃止した場合は、そのフォントを要求するルールを削除します。
ファイルが存在するはずの場合は、ファイルを復元します。フォントには、もう1つよくある障害の原因があります。それはオリジン間の制限です。別のドメインから配信されるフォントには、適切なヘッダーを付ける必要があります。そうしないと、ブラウザーはそのフォントの使用を拒否します。
その後ページをテストし、テキストが意図したフォントで表示されることを確認します。

Silktide によるチェック方法

実際のブラウザーで各ページを読み込み、ページが要求するすべてのファイルを記録します。
フォントファイルへの要求だけを抽出します。
ダウンロードに失敗したものをそれぞれ報告します。たとえば、404 などのサーバーからのエラーレスポンスや、接続の失敗です。誤検知を避けるため、一時的なタイムアウトや、ブラウザー自体が中止した要求は報告しません。
欠落している各ファイルがページ内のどこで参照されているかを強調表示します。

トラブルシューティング

試してみるとファイルは読み込まれる

ファイルがログインの背後にある、自動化された訪問者がブロックされている、または配信が安定していない可能性があります。混在コンテンツも確認してください。で配信されるページからプレーンな HTTP 経由で要求されたフォントは、ファイルが存在していてもブラウザーによってブロックされます。本当に問題がない場合は、検出結果をしてください。

テキストは問題なく見える

フォールバックフォントは置き換えに気付かないほど元のフォントに近いことがあり、特に本文ではその傾向があります。デザインと見出しを比較するか、ブラウザーの開発者ツールでフォント要求の失敗を確認してください。