アイコン用Webfont（シンボルフォント）作成メモ＠基本的にフリーウェア

当方の環境はWinです。Macでもほぼ同じ感じのはず、たぶん。
いろいろひっかかって面倒だったので作業の備忘録的な。

使用するソフト

• Inkscape

Inkscape は Windows、Mac OSX、および Linux 用のベクターグラフィックエディターです。オープンソースであり、そしてフリーです。

フリーらしいです。ありがとうございます！

アイコンをSVGで用意する

使用したいアイコンを Inkscape で頑張って描いて保存。
Adobeラブな場合、FW(要拡張)とかイラレとかで描いてSVG保存。
ちなみにこの時、アウトラインをとってあると後が楽。

SVGフォント化

Inkscape を起動。

「ファイル」→「ドキュメント設定」。「ページ」タブの「カスタムサイズ」でとりあえず大きめの正方形に（とりあえず1000px*1000pxにした）。

D&Dなどで上記で保存したSVGを読み込む。

1. 今回はドキュメントサイズぎりぎりまで拡大（場合によりけり）
2. だいたい真ん中にくるように配置

「テキスト」→「SVGフォントエディタ」を表示。

1. 「SVGフォントエディタ」の「新規」をクリック
2. 作成されたフォントを選択
3. 「グリフ」タブを選択
4. 「グリフを追加」をクリック
5. 追加されたグリフのマッチング文字列を入力

マッチング文字列に対して割り当て。

1. 「プレビューテキスト」に上記で設定した「マッチング文字列」を入力
2. 読み込んだSVGを選択
3. 追加したグリフを選択
4. 「選択オブジェクトから曲線を取得」をクリック
5. ここにアイコンが表示されれば成功
6. 「ファイル」→「保存」でSVGを保存

アイコンが表示されない場合

1. 選択ツールからノードツールに切り替えて、読み込んだSVGを選択
2. 「パス」→「結合」を選択
3. 再度「選択オブジェクトから曲線を取得」をクリック

で、アイコンが表示されるようになります。
これでもダメなら、「パス」→「連結」とかを
適当に選んでから再度、「選択オブジェクトから曲線を取得」を
クリックするとそのうち表示されます（体験談）

アイコンを追加する場合

• 「レイヤー」→「レイヤー」を表示。1レイヤーに1アイコンとかにすると管理しやすいかも
• あとはひとつめと同様に、SVGを読み込んで～で増やせる

ソフトのバグ？

この時のInkscapeのバージョンは0.48だったんだけど、
ノードツールに切り替えてパスの結合とかしてると、
SVGのサイズ変更をしようにも、上記の値が真っ白になってしまう。
ソフトを再起動すると再度弄れるようになるよ。ぐぬぬ。

SVGフォントをwoffとかに変換

• Online Font Converter

• ここで変換したらうまくいった。

• • でもなんかサイトに繋がらなくなった。。

• 2014/02/25追記：とりあえずつながった。ここがオススメ。

• IcoMoon App

• SVGをアップロードしてみても真っ白だと思ったら、個別編集でMoveDownしたら出てきた。たぶんベースラインの解釈がなんかおかしいらしい。

• 1個ずつ調整してくのは流石になぁ。。

• Choromeアプリ版なんてのもあるのね。

オンラインサービスって繋がらなくなった時点で使えなくなるのはリスクだよなぁ、と改めて。
もうちょっと調べてみるか。

とりあえずunicode一覧
http://ja.wikipedia.org/wiki/Unicode%E4%B8%80%E8%A6%A7_0000-0FFF