くるみ
- Font AwesomeをCDNではなくローカルで読み込んで、サイトの速度を改善したい
- PageSpeed Insightsでの「ウェブフォント読み込み中のテキストの表示」を解消したい
という方に向けて「WordPressにてFont Awesomeをローカルにダウンロードして読み込む方法」を解説します。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
お品書き
Font Awesomeをローカルにダウンロードして読み込む方法
方法はいたって簡単です。順を追って見ていきましょう。ローカルにダウンロードする
ファイルの整理
少しわかりにくい場合は、以下のファイルの階層を示した図を参考にしてみてください。
くるみ
all.min.cssを読み込む
<link rel="stylesheet" href="(設置したディレクトリ)/css/all.min.css" type="text/css">あとは上のように、先ほど設置したall.min.cssをheadタグ内にて読み込んであげます。
<link rel="stylesheet" href="/wp-content/themes/(子テーマ)/css/all.min.css" type="text/css">もし子テーマ直下に設置したのならこれでOKです。
これでFont Awesomeをローカル読み込みさせることができました。
くるみ
// FontAwesome
function sng_font_awesome_cdn_url() {
if (get_option('use_fontawesome4')) return 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
$fontawesome5_ver = get_option('fontawesome5_ver_num') ? preg_replace("/( | )/", "", get_option('fontawesome5_ver_num') ) : '5.11.2';
return '/wp-content/themes/sango-theme-poripu/css/all.min.css'; //変更
}ローカルのFont Awesomeのパスを返すようにしています。
「font-display:swap」を追加する
ここからは必須ではありませんが、PageSpeed Insightsでの「ウェブフォント読み込み中のテキストの表示」を解消するためにall.min.cssを編集します。
@font-face {
font-family: "Font Awesome 5 Brands";
font-style: normal;
font-weight: 400;
font-display: swap; //変更
src: url(../webfonts/fa-brands-400.eot);
src: url(../webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"), url(../webfonts/fa-brands-400.woff2) format("woff2"), url(../webfonts/fa-brands-400.woff) format("woff"), url(../webfonts/fa-brands-400.ttf) format("truetype"), url(../webfonts/fa-brands-400.svg#fontawesome) format("svg")
}
@font-face {
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 400;
font-display: swap; //変更
src: url(../webfonts/fa-regular-400.eot);
src: url(../webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"), url(../webfonts/fa-regular-400.woff2) format("woff2"), url(../webfonts/fa-regular-400.woff) format("woff"), url(../webfonts/fa-regular-400.ttf) format("truetype"), url(../webfonts/fa-regular-400.svg#fontawesome) format("svg")
}
@font-face {
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 900;
font-display: swap; //変更
src: url(../webfonts/fa-solid-900.eot);
src: url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(../webfonts/fa-solid-900.woff2) format("woff2"), url(../webfonts/fa-solid-900.woff) format("woff"), url(../webfonts/fa-solid-900.ttf) format("truetype"), url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")
}「@font-display」というセレクタの「font-display」のプロパティの値を「block」から「swap」に変更してあげます。
これで「ウェブフォント読み込み中のテキストの表示」解消されるはず。
実はこの問題はCDNで読み込んでいた場合でも解消することができました。しかしそれは一部のテーマのみの話で、その他のテーマでは親テーマのCSSに「font-display:swap」を記述しても上書きできなかったのです。
しかし今回のようにローカルで読み込む方法であればテーマ問わず解消できるので、それも１つの大きなメリットですね。
「キーリクエストのプリロード」の解決
この方法でFont Awesomeを読み込めたはいいものの、PageSpeedInsightsで「キーリクエストのプリロード」という項目が出る場合は、preloadを用いてフォントを先読みしてあげる必要があります。
まず出力されるURLをコピーします。(今回追加したwebfontディレクトリの中のフォントファイルのことですね)
そしてそれを以下の様にheadタグに追記してあげればOK。
<link rel="preload" as="font" type="font/woff" href="(コピーしたURL)" crossorigin>上の画像の様に2つURLが表示されていた場合は、href属性だけを変えてlinkタグを2つ挿入してあげればOKです。
くるみ
まとめ
今までFont AwesomeをCDN経由で読み込んでいた場合は、この方法である程度速度の改善が見込めると思います。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
