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/fontawesome-free@5.6.3/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/fontawesome-free@5.6.3/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/fontawesome-free@5.6.3/webfonts/fa-regular-400.woff2") format("woff2"),
         url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/webfonts/fa-solid-900.woff2") format("woff2");
     font-display: swap;
 }