InsightsはWebサイトの改善点を教えてくれるツールです。自分が管理するWebサイトを診断にかけるといくつかの問題点が表示されます。「ウェブフォント読み込み中のテキストの表示」はその中のひとつです。「ウェブフォント読み込み中のテキストの表示」はなぜ表示されるのか、また解決方法についても解説します。手順001_「@font-face」を探す手順002_「@font-face」を作るまとめ「ウェブフォント読み込み中のテキストの表示」とは?ホームページで使われる文字はフォントと呼びます。フォントの種類はたくさんあり、例えば「明朝」「ゴシック」などがフォントの名前です。フォントにはローカルフォントとウェブフォントがあります。ローカルフォントとは、パソコンに入っているフォントのことです。対するウェブフォントはウェブ上に存在するフォントを指します。基本的にローカルフォントよりウェブフォントのほうが数が多くデザイン性に富んでいます。そのためホームページをきれいにデザインしたいとき、ウェブフォントを使うことが多くなりました。ウェブフォントは、ローカルフォントに比べて表示に時間がかかるデメリットがあります。ホームページの画像やhtmlファイルなどと同じように、閲覧するにはウェブフォントをダウンロードする必要があるからです。「ウェブフォント読み込み中のテキストの表示」とは、ウェブフォントを読み込んでいる間、代わりとなるテキストを表示してください、というメッセージなのです。機能を使用して、ウェブフォントの読み込み中にユーザーがテキストを見られるようにしてください。swap;」を追加する必要があります。「font-display」を指定しない場合、ウェブフォントを読み込むまでブラウザは何も表示しません。swap;」を指定することで初めて、ウェブフォント読み込み中に代替えフォントを表示するのです。手順001_「@font-face」を探すWordPressでウェブサイトを作っている場合、テーマを利用しているかと思います。ご利用テーマによってはすでに「@font-face」の記述があるかもしれません。既存のCSSファイルを調べてください。swap;」を追加するだけで作業完了です。手順002_「@font-face」を作る「@font-face」がない場合、CSSファイルに以下コードを追加してください。}【任意のフォント名】はウェブフォントを適用したいCSSクラスなどに指定するときに使います。以下のように書いてください。Insightsの画面から取得できます。リンクのアドレスをコピー」を試してください。まとめ「ウェブフォント読み込み中のテキストの表示」を解決するとウェブページの表示スピードが改善されます。Insightsからエラーメッセージは消え、スコアもアップするでしょう。ウェブサイトの表示速度を改善したい方はぜひ試してください。)トラックバックは利用できません。この記事へのコメントはありません。返信をキャンセルする。