PostMaster

Edit

Font-Awesome 5を使うときのPageSpeed Insights「ウェブフォント読み込み中の全テキストの表示」対策

目次

Pagespeed Insightsでフォントの代替表示を求められた

ページ装飾のアクセントにアイコンフォントとしてFont-Awesome 5 のフォントをCDN経由で読み込んで使用しているのですが、Pagespeed Insightsでページの分析をした際、以下のような改善案が表示されました。

ウェブフォント読み込み中の全テキストの表示
フォント表示の CSS 機能を使用して、ウェブフォントの読み込み中にユーザーがテキストを見られるようにしてください。

この改善案に対して、どうのような対策を採ればいいのか調べたとことCSSに@font-faceの設定を加えればいいみたいなので、やってみたことをメモ。

３つのフォントファイルに対して対策が必要

Font-Awesome 5（Free）を以下のコードで読み込んでいるのですが、ページを表示する際に以下の3つのフォントファイルがFont-Awesome 5のスタイルシートから読み込まれます。その３つのフォントに対して代替表示の対策をしなければなりません。

Font-Awesome 5（Free）の読み込みコード

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css">

上記のスタイルシートから読み込まれるフォントファイル

この３つに対して対策が必要。

  • fa-brands-400.woff2
  • fa-regular-400.woff2
  • fa-solid-900.woff2

スタイルシートに@font-faceを追加して解決

ページのスタイルシートに以下のコードを追記することで解決できました。@font-faceに３つのフォントファイルを指定。

@font-face {
     font-family: 'Font Awesome 5 Brands';
     font-style: normal;
     font-weight: 400;
     src: url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.woff2") format("woff2");
     font-display: swap;
 }

 @font-face {
     font-family: 'Font Awesome 5 Free';
     font-style: normal;
     font-weight: 900;
     src:url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.woff2") format("woff2"),
         url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.woff2") format("woff2");
     font-display: swap;
 }

診断に合格

スタイルシートに@font-faceを加えた後に、再度Pagespeed Insightsでページを分析したら無事合格しました。「診断」の欄から「合格した監査」の欄に移動していました。

@font-faceでFont-Awesome 5を指定するときはfont-weightに注意

FontAwesome5を使うときは必ず font-weight:400; または font-weight:900; を指定しないとうまくいきません。font-weight:normal;とか使うとダメです。

また、ブラウザによっては@font-faceに対応していないブラウザがあります。

Link
Can I Use... Support Tables For Html5, Css3, Etc

Can I Use... Support Tables For Html5, Css3, Etc

https://caniuse.com/#search=font-display

ついでに「Preload」や「Prefetch」で高速化

対策ついでに以下のコードを<head>～</head>間に入れておくことでページを読み込む間（レンダリングが開始される前）にWEBフォントを事前に読み込んでおくことができます。多少の高速化が図れます。

Preloadだけでもいいのですが、Preloadは一部のブラウザが対応していないので、幅広く対応しているPrefetchと併用しています。

<link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.woff2" crossorigin>
<link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.woff2" crossorigin>
<link rel="preload prefetch" as="font" type="font/woff2" href="//cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.woff2" crossorigin>

参考にしたページ

Link
Pavel Makhov

Pavel Makhov

https://pavelmakhov.com/2018/04/font-awesome-5-in-gwt/
Link
[css]web制作者が知っておきたい、Webフォントを快適に表示するcssの新しいプロパティ「Font-Display」 | コリス

[css]web制作者が知っておきたい、Webフォントを快適に表示するcssの新しいプロパティ「Font-Display」 | コリス

https://coliss.com/articles/build-websites/operation/css/about-font-display.html
Link
Redirecting...

Redirecting...

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=ja
Link
CssでWebフォントの読み込みが遅い問題を改善する方法 #html - Qiita

CssでWebフォントの読み込みが遅い問題を改善する方法 #html - Qiita

https://qiita.com/oreo/items/2e82bfeb42e351557c3c

後日再発

解決したつもりが後日またPageSpeed Insightsで「ウェブフォント読み込み中の全テキストの表示」について警告が出ました。

all.cssを改造して読込

Font-Awesome 5 の all.css をCDNからの読み込みではなくローカルに置き、一部を以下のように変更しました。all.cssの最下位部分にあります。2パターンで試したところ、どちらでも警告が出ないようになりました。

パターン1

font-display: Auto;をswapに変更し、意味はわかりませんがlocal("@")を挿入し、urlはCDNのパスに変更してしています。

@font-face {
   font-family: 'Font Awesome 5 Brands';
   font-style: normal;
   font-weight: normal;
   font-display: swap;
   src: url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.eot");
   src: local("@"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.svg#fontawesome") format("svg"); }
   
.fab {
   font-family: 'Font Awesome 5 Brands'; }
   @font-face {
   font-family: 'Font Awesome 5 Free';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.eot");
   src: local("@"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
   
.far {
   font-family: 'Font Awesome 5 Free';
   font-weight: 400; }
   @font-face {
   font-family: 'Font Awesome 5 Free';
   font-style: normal;
   font-weight: 900;
   font-display: swap;
   src: url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.eot");
   src: local("@"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.svg#fontawesome") format("svg"); }
パターン2

パターン1との違いはlocalのパスの部分です。

@font-face {
 font-family: 'Font Awesome 5 Brands';
 font-style: normal;
 font-weight: normal;
 font-display: swap;
 src: url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.eot");
 src: local("/webfont/fontawesome-free-5.11.2/package/webfonts/fa-brands-400.woff2") , url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-brands-400.svg#fontawesome") format("svg"); }
 
.fab {
   font-family: 'Font Awesome 5 Brands'; }
   @font-face {
   font-family: 'Font Awesome 5 Free';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.eot");
   src: local("/webfont/fontawesome-free-5.11.2/package/webfonts/fa-regular-400.woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
   
.far {
   font-family: 'Font Awesome 5 Free';
   font-weight: 400; }
   @font-face {
   font-family: 'Font Awesome 5 Free';
   font-style: normal;
   font-weight: 900;
   font-display: swap;
   src: url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.eot");
   src: local("/webfont/fontawesome-free-5.11.2/package/webfonts/fa-solid-900.woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.woff2") format("woff2"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.woff") format("woff"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.ttf") format("truetype"), url("https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

前へ

ブログの目次をアンカーリンク付きで自動作成して表示するJS「TOC.js」

次へ

2019年3月のWindows Update 月例ロールアップ （Windows10/8.1/7）