【脱CDN】Font Awesomeをローカルにダウンロードして読み込む方法

【脱CDN】Font Awesomeをローカルにダウンロードして読み込む方法

くるみ

Font Awesomeをローカルで読み込めるって本当?
ということで今回は

  • Font AwesomeをCDNではなくローカルで読み込んで、サイトの速度を改善したい
  • PageSpeed Insightsでの「ウェブフォント読み込み中のテキストの表示」を解消したい

という方に向けて「WordPressにてFont Awesomeをローカルにダウンロードして読み込む方法」を解説します。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

Font Awesomeをローカルにダウンロードして読み込む方法

方法はいたって簡単です。順を追って見ていきましょう。

ローカルにダウンロードする

step1
公式サイトにアクセス

まずFont Awesomeのダウンロードページにいきます

step2
zipファイルをダウンロード

zipファイルをダウンロード

右下にある「Download Font Awesome Free for the Web」をクリックしてダウンロードします。

ファイルの整理

step3
zipを解凍する

zipを解凍する

まずファイルを解凍します。

CSSとwebfontsの2つのディレクトリ

今回アップロードするのはその中の「CSS」と「webfonts」という2つのディレクトリです。
step4
all.min.css以外を削除する

all.min.css以外を削除する

アップロードする前にまずCSSディレクトリの中のall.min.css以外を削除します。
step5
CSSとwebfontsをアップロード

CSSとwebfontsをアップロード

CSSとwebfonts、2つのディレクトリをFTPソフトなどを使ってアップロードします。子テーマ直下に置くのがおすすめです。

少しわかりにくい場合は、以下のファイルの階層を示した図を参考にしてみてください。

ファイル構成

この通りの構成にしないと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をローカル読み込みさせることができました。

ひとまず一件落着だね

くるみ

余談ではありますが、当サイトのようにSANGOをテーマとして使われている方は、sango-theme/library/functions/sng-style-scripts.phpを以下のように修正してあげても読み込むことができます。

// 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」を記述しても上書きできなかったのです。

しかし今回のようにローカルで読み込む方法であればテーマ問わず解消できるので、それも1つの大きなメリットですね。

「キーリクエストのプリロード」の解決

この方法で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です。

お疲れ様!

くるみ

まとめ

以上、WordPressにてFont Awesomeをローカルにダウンロードして読み込む方法でした。

今までFont AwesomeをCDN経由で読み込んでいた場合は、この方法である程度速度の改善が見込めると思います。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

コメントを残す

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

22年4月から自社開発企業のWebエンジニアとして働く大学生。このサイトでは主にプログラミング・WordPress・宅配冷凍弁当について発信しています。お問い合わせはこちらよりどうぞ。