これなら簡単！SVG対応、アイコンを組み合わせてWebフォントのセットを作成できる無料ツール -Webfont
Post on:2019年1月28日
sponsors
複数のアイコンを自由に組み合わせて、SVG対応のWebフォントにできるmacOS対応の無料ツールを紹介します。
ソーシャルメディア用のアイコンで作成したり、自分のサイト用のアイコンで作成したり、自分だけのオリジナルのWebフォントを簡単に作成できます。
Webfontの特徴
Webfontは、アイコンを自由に組み合わせてWebフォントを作成・管理できる、macOS対応のツールです。
-
- アイコンを自由に組み合わせ
- 手元のアイコンを自由に組み合わせて、SVG対応のWebフォントのセットを作成できます。既存のフォントをインポートすることも可能です。
-
- フォントのカスタマイズ
- アイコンをカスタマイズして、フォントに名前を付けることができます。
-
- フォントのエクスポート
- フォントには1クリックでエクスポートできます。HTMLやCSSファイルも生成されるので、簡単に利用できます。
フォーマットは、.svg, .ttf, .eot, .woff, .woff2
-
- コラボレーション
- メンバーを招待し、チームを作成して、共同で作成することもできます。
Webfontには無料プランと有料プランがあります。
無料プランでもプロジェクト数やフォント数は無制限、ユーザー数も無制限、永遠に無料で利用できます。制限としては、1フォントあたりアイコンが16個までとなっています。
小規模のプロジェクトであれば、16個をセットにできれば十分でしょう。
価格表
Webfontのインストール
Webfontは、macOS 10.12+対応の無料ツールです。
下記ページからダウンロードできます。
.dmgファイルがダウンロードできるので、ダブルクリックしてアプリケーションフォルダに移動するだけで、使用できます。
Webfontの使い方
Webfontをさっそく使用してみました。非常に簡単な作業で、アイコンのセットをWebフォントに変換できます。
まずは、Webfontの起動画面。
Webfontの起動画面
「Create Project」をクリックし、プロジェクトを作成します。最初なので、「First」と名付けました。
プロジェクトの作成
「Icons」パネルで、アイコンを登録します。アイコンはドラッグ&ドロップするだけで、簡単に登録できます。ここでは先週紹介した「カメラや写真をテーマにしたアイコン素材」を使用しました。
アイコンのインポート
「Setting」パネルでは、プロジェクトの編集ができます。
プロジェクトの編集
「Export」パネルでは、組み合わせたアイコンをWebフォントにエクスポートできます。「Export & Download」ボタンをクリックするだけで、完了です。
Webフォントにエクスポート
生成されたWebフォントのセットです。Webフォントファイルの他に、実装する際のHTMLやCSSファイルも含まれています。
生成されたWebフォントのセット
sponsors
