初心者でもできるイラストレーターを使った自作アイコンフォントの作り方

高速化のためにアイコンフォントを導入しようと思い、自作アイコンフォントを作ったのでその作業メモです。

必要なものは、イラストレーターだけです。

アイコンフォントのメリットとCSSスプライト＆SVGとの比較

作業の前にアイコンフォントについてのざっくりまとめです。

・拡大しても劣化しない・CSSで色を変更することができる・ファイルサイズが小さいので速い

20個程度のアイコンフォントでもファイルサイズは5.5KB程度なのでダウンロードは速いです。さらに、ラスター画像ではないので拡大しても劣化しません。

なので、単色のアイコンはアイコンフォント化してしまう方が良さそうです。

多色のアイコンの場合はCSSスプライトかSVGが選択肢としてありそうですが、Internet Explorer8以下はSVG未対応なので悩ましいですね。

アイコンフォントはEOT形式であれば、IE6から対応しているのである程度は安心かと思います（試してないので断定できないですが）

パスはなるべく整理して、文字や枠線もアウトライン化することが必要です。簡単な図形なら以下の操作を知っていれば作れると思います。

【文字のアウトライン化】
文字を右クリック > アウトラインを作成

【枠線のアウトライン化】
オブジェクト > パス > パスのアウトライン

【パスを型抜き】
オブジェクト > 複合パスを作成

【図形のパスを合体】
パスファインダー > 合体
＊パスファインダーはウィンドウから表示できます

【オープンパスを結合】
1. ダイレクト選択ツールで結合する2点のアンカーポイントを選択する
2. （選択状態のまま）オブジェクト > パス > 連結

ファイル > 別名で保存 > ファイル形式SVG（svg）を選び保存

作成したSVGファイルを元にウェブフォントを作成します。

GlyphsやFontographerなどのフォント作成アプリがあるらしいのですが、今回はアイコンフォントを作るだけなのでFontello、Icon Moonなどのウェブアプリを使います。

複雑なパスのイラストだとウェブフォントにする時に崩れてしまうことがあるので、その時は再度イラストレータで調整してください。