TwitterやFacebookなどのマークアイコンが表示できる便利なWebフォント「Font Awesome」から必要なフォントだけを抽出してページの表示速度を改善する方法

通常のフォントにはないフォントが634種類も使える便利なWebフォント「Font Awesome」をご存知ですか？

Webページでは、機種依存などのフォントを使うと、自分のPCでは表示できても他のPCでは表示できなかったり、TwitterやFacebookなどのマークを使いたいと思っても画像で貼り付けるしかなくて不便だったりします。

そんな不便を解消してくれるのがWebフォントと呼ばれるもので、Webページでも様々なフォントを表示することが可能になっています。

そのなかでも、「Font Awesome」は、使いたいデザインのフォントがほとんど登録されているので、使っている方も多くおられるのではないでしょうか。

そんな便利なWebフォントですが、欠点として、フォントファイルをダウンロードして表示しているので、どうしても、ページの表示速度が遅くなったり、Webフォントだけが遅れて表示されてしまったりします。
「Font Awesome」も634種類ものフォントが登録されていますので、ファイルのサイズもどうしても大きくなってしまうので、表示速度や通信量が気になるところですよね。

「Font Awesome」は、ダウンロードして自分のサーバーに配置することもできるので、表示速度などはある程度、改善できるのでうが、ファイルサイズだけはこれだけでは小さくすることはできません。

でも、「Font Awesome」の全てのフォントを使っている方はほとんどいなくてその中の数個だけの方がほとんどだと思うので、その数個のフォントファイルを作ってしまえば、フォントファイルのサイズを小さくすることができます。

今回は、「Font Awesome」のWordPressでの自サーバーへの配置方法を、必要なフォントのみを抽出してフォントファイルを作成する方法をご紹介します。

Font Awesomeの自サイトへの配置方法【WordPress】

https://fontawesome.io/にアクセスします。
「Download」ボタンをクリックします。
”No thanks,just download Font Awesome”リンクをクリックします。
ダウンロードしたZIPファイルを解凍します。
解凍したファイルをFTP等で任意の場所（子テーマフォルダ等）にアップロードします。
※ 必要なファイルは
font-awesomeフォルダ
fontsフォルダ→fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
cssフォルダ→font-awesome.css
font-awesome.min.css
です。フォルダの構成は変更しないでアップロードしてください。

header.phpに下記コードを追加します。

<link rel="stylesheet" href="/wp-content/themes/biz-vektor_child/font-awesome/css/font-awesome.min.css">

記事等にフォント表示用タグを入力してみて、Font Awesomeフォントが表示されるか確認します。
※例　Twitterフォントの表示
```
<i class="fa fa-twitter"></i>
```

必要なフォントのみを、自サイトに配置する方法【WordPress】

※ 前述の「Font Awesomeの自サイトへの配置方法」でFont Awesomeフォントが表示を完了させておきます。

https://icomoon.io/にアクセスします。
右上の”IcoMoon App”をクリックします。
最下部にある”Add Icons From Library”をクリックします。
リスト中の「Font Awesome」の”Add”ボタンをクリックします。
アイコンリストの中から必要なフォントをクリックして選択します。
全て選択したら「Generate Font」をクリックします。
「Download」ボタンに切り替わるので、その右にある”歯車”ボタンをクリックします。
下記の項目の設定を変更して右上の「X（バツ）」ボタンをクリックします。
- Font Name:fontawesome-webfont
- Class Prefix:fa-
- Baseline Height:15
「Download」ボタンをクリックして、ZIPファイルをダウンロードします。
ZIPファイルを解凍して、「style.css」ファイルをテキストエディタで開きます。
２〜６行目の”fonts/fontawesome-webfont〜”を”’../fonts/fontawesome-webfont”に変更します。
「style.css」のファイル名を「font-awesome.min.css」に変更します。
変更した「font-awesome.min.css」とfontフォルダ内のファイルを、前述でアップロードした「fontフォルダ」と「cssフォルダ」に上書きします。
※ 同じファイル名のファイルになっています。
記事等にフォント表示用タグを入力してみて、Font Awesomeフォントが表示されるか確認します。
※例　Twitterフォントを追加している場合
```
<i class="fa fa-twitter"></i>
```