ネットで調べるとIcoMoonを使ってサブセット化する方法が紹介されていた。
が、実際にやってみると、微妙にスタイリングが変わってしまうアイコンがある。
サブセット化したフォントをIcoMoonから出力する際にレイアウトの調整もできるが、Font Awesomeとまったく同じスタイリングにはならない。
cssでマージンやパディングを調整しても微妙な違いが残る。
これから作る新規サイトなら最初からそのスタイリングに合わせてデザインするので、何も問題ない。
でも既存サイトだと、デザインやレイアウトのチェックや修正が大変。
というわけで、Font Awesomeのフォントファイルから不要なアイコンを直接間引く、という方法を採った。
この方法は、最初の間引きをするのは少し手間だが、後からアイコンを追加したり、削除したりの修正が容易にできる。
また、独自のアイコンを追加するのもやりやすい。
- fontawesome-webfont.ttfファイルをFontForgeで開く
実際に編集するのはttfファイルのみ。eot,woff,woff2,svgは、ttfファイルを形式変換させて生成する。
otfはosにインストールして使うモノなのでwebサイトでは不要。生成しない。 - 不要なアイコンフォントを選択して「右クリック→切り取り」で削除していく。
複数のアイコンフォントを選択して一括削除は出来なさそう。Ctrl+Xによる切り取りも効かない。面倒だが1個ずつ「右クリック→切り取り」で削除する。 - 不要なアイコンフォントをすべて削除し終わったら、メニューの「ファイル→フォントを出力」をクリック
- ダイアログボックスが表示されるので、保存に必要な情報を入力する。
ドロップダウンリストで保存先のフォルダを選択
表示された下層フォルダ名を「選択→ダブルクリック」すると、さらにその下層フォルダが表示されるので、保存ファイルがあるフォルダまで辿っていく。
テキストボックスに保存ファイル名を入力(保存先のフォルダ以降の全パスを含む。ここでは編集中のttfファイルと同名にする。つまり上書き保存)
※保存先フォルダ・保存ファイル名を設定するこのあたりの操作感は非常に分かり難い。
書き出し形式（「PS Type 1」になっている箇所）を「TrueType」に変更する。
「生成」ボタンを押す。
FontForgeが、このまま保存すると問題があることを提起してくるが、意味がわからないので無視してそのまま保存(ここでは上書き保存)する。 - サブセット化されたttfファイルができ上がる。
- サブセット化されたttfファイルをFontForgeで開く。
- 3～4を実行するが、
「PS Type 1」になっている箇所は「SVGフォント」に変更する。
保存ファイル名は同名で、拡張子を.svgにする。 - 以上でサブセット化されたttfファイル、svgファイルができ上がった。
- eot,woff,woff2については、サブセットフォントメーカーを使って、ttfファイルから3ファイルまとめて生成する。
コメントを残す