アフィリエイト広告を利用しています

広告

posted by fanblog

fontawesomeから脱却にこにこ️UTF-8に置き換えました。ウェブフォント読み込み中のテキストの表示警告( `font-display`)

ウェブフォント読み込み中のテキストの表示
警告: オリジンの URL の `font-display` の値を Lighthouse で確認できませんでした。



https://pagespeed.web.dev/ の分析結果で上記のような警告が表示されていました。この警告はフォント読み込めない最中の代替えフォントを指定することで解決できます(https://www.rectus.co.jp/archives/407を読むとなんとなく解決方法がわかります)。

ワードプレスのテーマでいくつかfontawesomeのフォント(font-awesome.min.css?ver=4.5.0)が利用されていました。

問題は以下2点。
  • pagespeedで「ウェブフォント読み込み中のテキストの表示」の警告が出る
  • 表示を確認したところfontawesome利用箇所のフォントが何も表示されていない


実際、どこでfontawesomeのフォントを利用しているのかを調べたところ5種類程度でした。
(「"fa 」で調べる(grep)と比較的簡単にわかります。)
  1. ページの先頭に戻るアイコン[fa fa-angle-up]
  2. カテゴリ [fa fa-folder-open-o]
  3. タグ [fa fa-tags]
  4. 更新日 [fa fa-clock-o]
  5. スマホ用のアコーディオンアイコン [fa fa-bars]
  6. その他SNSシェアボタン←これは削除しました


Googleのマテリアルフォントに変更しようかと検討しましたが、そもそも種類少ないのでUTF-8でいいんじゃない?
UTF-8の代替え文字(これに置き換えました){その他候補}
  1. 🔝){}ページの先頭に戻るアイコン[fa fa-angle-up]
  2. 📂){📁}カテゴリ [fa fa-folder-open-o]
  3. 🏷)タグ [fa fa-tags]
  4. 🕒){🕐🕑🕓}更新日 [fa fa-clock-o]
  5. )スマホ用のアコーディオンアイコン [fa fa-bars


まとめ:使っている種類が少ないならUTF-8置き換えが簡単です


pageinsigtの指摘に取り組むと、cssやwof(フォントデータ)のpreload対応やfont-display:swap対応などが必要になることがあります。

今回UTF-8に置き換えたことでこの辺りの警告は無くなりました

 

  • 初期費用0円(2022年8月4日に撤廃)
  • 安定したサイト運営が可能(CPU/メモリ リソース保証 6コア/8GB〜)
  • 契約中は独自ドメインつき 独自ドメイン永久無料特典があります
  • 最大10日間無料で、サーバーのお試し利用ができます
  • ディスクキャッシュも高速 NVMe SSDを採用(300GB〜)
  • 大量アクセスでも安心 転送量は無制限

 

 

この記事へのコメント
コメントを書く

お名前:

メールアドレス:


ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバックURL
https://fanblogs.jp/tb/12221243
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
最新記事
最新コメント
タグクラウド
カテゴリアーカイブ
×

この広告は30日以上新しい記事の更新がないブログに表示されております。