Font Awesome便利ですよね。導入が簡単で無料でも1500個以上と十分すぎる数のアイコンが使えます。

このサイトでも使っているのですが、ただ1つ問題があって、サイズが大きく重いことです。

このサイトで使っているFont Awesomeのアイコンは5つ、他は自作アイコンをsvgとimgタグで表示してます。つまりFont Awesomeのアイコンは4つしか使ってないのに1500以上のアイコンを全て読み込んでいて無駄です。

そこでサブセット化という、フォント内の使っていない文字を削除することで軽量化ができるのですが、IcoMoonを使うとこの処理が簡単に行えます。

フォントの生成

IcoMoonとは

必要なアイコンだけ集めたフォントを作れるサービスです。有料プランもありますが、無料アイコンや自作アイコンからカスタムフォントを作るだけなら無料で使えます。

Icon Font & SVG Icon Sets ❍ IcoMoon

Font Awesomeアイコンの選択

上のURLを開いた後右上の「IcoMoon App」からフォントの生成が行えます。

最初に開いた際、無料で使える「IcoMoon Free」というアイコンセットが読み込まれていますが、今回はFont Awesomeを使うのでこいつは右のメニューボタンから「Remove Set」で消してください。

その後、「Add Icon From Library...」から「Font Awesome」を探して「+ Add」します。

そうすると、Font Awesomeのアイコンセットが読み込まれるので、その中から必要なものを選択します。

自作アイコンの追加

もしこのサイトのように、Font Awesome以外にベクターデータの自作アイコンを使用している場合、まとめてそれらもフォント化しておくと、リクエスト数減少による軽量化&高速化が見込めます。

左上の「Import Icons」から自作アイコンのSVGファイルを選択して取り込めるので、もし自作ベクターアイコンがある場合はここで一緒にフォント化してしまいましょう。

ちなみに、この時パスのストロークが消えてしまうので、もしパスにストロークが適応されている場合はイラストレータなどを利用してパスのアウトライン化を行ってください。

フォントのダウンロード

使用する全てのアイコンを選択したら右下の「Generate Font」をクリックします。

ここで生成されたフォントをダウンロードできるのですが、その前にフォントの設定を変更します。

左上の「Preferences」を開いてFont NameやMetadataを適宜編集してください。Font Nameはicomoonのままじゃなくて任意に変更した方がいいと思います。Metadataはライセンスが関係してくるので、下の方に記載したライセンスのセクションを参考に適宜変更してください。

それが完了したら右下のDownloadボタンからフォントをダウンロードしてください。

プロジェクトのダウンロード（任意）

今回生成したフォントなんですが、ブラウザのストレージがクリアされると最初から作り直しとなり、その際にそれぞれのアイコンに対応する文字コードが変わったりすると色々と面倒なので、ローカルに保存しておくことをおすすめします。

左上のハンバーガーメニューからManage Projectに移動するとプロジェクト名の変更とローカルへのダウンロードができるので、これをどこかに保管しておきましょう。

テーマに組み込む

wordpressテーマのディレクトリを直接操作します。

wordpressディレクトリ内のwp-content/themes/[テーマ名]/がテーマのディレクトリなので、この中にfontsディレクトリをコピーしてください。

そして、「wp-content/themes/[テーマ名]/style.css」内部に、ダウンロードした中にあったstyle.cssの内容を全てコピーして追記してください。

あとは、フォントダウンロード時の設定にもよりますが、CSS Selectorを標準から変えていないのであれば、icon-*のようなクラス名を任意の要素に付けてやればアイコンが使えます。

ライセンス

面倒な部分です。コピーライトやライセンス条文って人間が読めるメタデータやヘッダー、一緒に配布するテキストファイルなどに含める必要があります。

詳しくは別記事にまとめてますが、正直僕もこれに関しては正解が分かりません。

とりあえず、僕の場合は先ほどテーマ内にコピーしたfontsディレクトリ内にlicense.txtを用意、その中にFont Awesomeのコピーライトを記載して、そのURLをフォントのメタデータに埋め込む形にしました。

まとめ

とりあえず、これでFont Awesomeを使用するのに読み込んでいたcssやフォントファイル151KBを6KBに減らすことができました。

実際は他に使用していたsvgなども組み込んでのサイズなので、通信容量の節約はこれ以上になります。

Webサイトを軽量化したいけどFont Awesomeも使いたいって人は試してみてはどうでしょうか。