イラストレーター不要!Twitterアイコン画像をWebフォントに変換しよう


Webfontday der Typographischen Gesellschaft München (tgm)
画像を追加することなくCSSで指定するだけで画面にアイコン画像を表示してくれるアイコンフォントは便利ですね。フォントのサイズ指定するだけで大きさを変更できたり、 Font Awesome Fontello の様なWebサービスはCDNからでも手軽に利用できるので重宝しています。オリジナルのアイコンフォントはIllustratorなどのベクターツールにSVG出力機能があれば簡単に作成できますが、元の画像をトレースしたりと画像によっては結構大変な作業が必要になります。

TwitterアイコンをWebフォント化する

さてここでTwitter等に使用しているアイコンをベクターツールを使わずにWebフォント化してみます。

今回はサンプルとして、写真画像ではなくベクターが元になった、または線だけで書かれた画像の @tanakahisateru 氏のアイコンを使用します。大まかな手順としては画像をSVGに変換して、Webフォントにするという流れになります。画像の種類によってはSVGにすると崩れる場合がありますのでできるだけ線画を使用します。

手順

1. SVGに変換する画像を用意する

2. ラスタ画像svg化スクリプト「potrace.js」にアクセスして画像をドラッグ&ドロップ

3. 出力情報の実行ボタンをクリック
SVGをWebフォント化手順3

4. 書き出しが終われば[svg]を右クリックでメニューを表示、「リンク先を別名で保存」を選択してダウンロードする
SVGをWebフォント化手順4

5. Fontello にアクセスして先ほどダウンロードしたsvgを画面にドラッグ&ドロップする
SVGをWebフォント化手順5

6. svgが読み込まれたらアイコンをマウスオーバーさせて、表示される鉛筆アイコンをクリックする
SVGをWebフォント化手順6

7. モーダルが表示されるので適当な名前を入れてSave glyphをクリック
SVGをWebフォント化手順6

8. 再度アイコンを選択状態にして、Download webfontをクリックすればZIPファイルがダウンロードされます
SVGをWebフォント化手順7

9. ZIPファイルを解凍して、中に含まれているdemo.htmlをブラウザで表示させてみましょう。
Webフォント化手順8

Chromeのデベロッパーツールなどを使ってアイコンフォントの文字サイズやスタイルを変更してみると楽しいかも。

おまけ: 写真が元になったアイコンをSVGにしてみる

一応試してみましたがダメでした。やはり線画でないと難しいようです。

写真をSVGに

線画でも上手くいく画像とそうでないものがあるみたいなので色々試してみて下さい。

関連リンク

2014/06/18追記1: icomoonでフォント化

SVG画像をフォントに変換する際にもしかするとicomoonの方が使いやすいかもと思ったので手順を追記します。

1. IcoMoonにアクセスしてIcoMoon Appをクリック
icomoon-1

2. ライブラリに画像をインポート
icomoon-2

3. インポートしたアイコンを選択して下のFontボタンをクリック
a-3

4. Downloadボタンをクリックしてデータをダウンロードする
icomoon-5

とまあここまではFontelloとそう変わらないんですが、違いはFontelloで出力されるCSSファイルが複数なのに対して、IcoMoonはCSSがstyle.cssというファイル1つだけなのです。
icomoon-5

どちらが使いやすいかは人それぞれですが、フォント化はIcoMoonでもできるよということでした。