使いたいアイコンフォントを選んでWebフォントをカスタマイズ作成できるサービスいろいろ

@kasumiiです。こんにちは。

サイトを作るとき、「Font Awesome」などのアイコンフォントを使えば、アイコン画像を用意しなくてもいいし、色もサイズも自由に変えられるのでとても便利ですよね。

でも、使わないアイコンもたくさんあるのに全部読み込むのは効率悪いので、使いたいアイコンだけ選択してフォントファイルを生成してくれるサービスを探してみました。

これならフォントのファイルサイズも小さくて済むし、中にはSVGをフォントに変換してくれるサービスもあるのでオリジナルのアイコンフォントも作れますね!ヽ(*´ω`*)ノ

フォントのライセンスに関しては各サービス上でご確認くださいませー。

たくさんあるアイコンフォントから使いたいものだけ選んでウェブフォントに。選べるアイコンフォントは「Fontelico」「Entypo」「Font Awesome」「Iconic」「Typicons」「Modern Pictograms」「Meteocons」「MFG Labs」など、有名どころがしっかり揃っています。

Fontello – icon fonts generator

Fontello と同じように有名どころのアイコンフォントを選択できます。SVGを読み込んでフォントに変換も可能。

IcoMoon App – Icon Font Generator

Font Custom は既存のアイコンフォントをGUIで選ぶわけではなく、コマンドラインでSVGやEPSファイルをいれたフォルダを監視しフォントに自動変換してくれます。Bootstrapですぐに使えるCSSも一緒に生成されるので便利。

Font Custom

以下のふたつは有料になるみたいなのでさらっとリンクだけ。「Pictonic」はなかなか高機能っぽい。

【参考】Pictos
【参考】Icon Fonts | Pictonic.co

アイコン選ぶのも面倒だからできるだけコンパクトにまとまったアイコンWebフォントないの?という方はこれそのまま使うのがいいかも知れません。ソーシャル系のアイコンも入っていて使いやすいです。

Web Icon Fonts | chibatch.jp

以上、メモでした。どれを使おうか迷っちゃいますねw

これからもアイコンフォントをカスタマイズできるサービスは増えてきそうだし、SVGからオリジナルのアイコンフォント作る需要も高まりそうな気がしますねー。

環境にもよりますが、お手軽だしメンテナンスも楽なので、アイコンはWebフォントでどんどんやっていきたいものですヽ(*´ω`*)ノ