これなら簡単！SVG対応、アイコンを組み合わせてWebフォントのセットを作成できる無料ツール -Webfont

複数のアイコンを自由に組み合わせて、SVG対応のWebフォントにできるmacOS対応の無料ツールを紹介します。

ソーシャルメディア用のアイコンで作成したり、自分のサイト用のアイコンで作成したり、自分だけのオリジナルのWebフォントを簡単に作成できます。

Webfont

Webfontの特徴

Webfontは、アイコンを自由に組み合わせてWebフォントを作成・管理できる、macOS対応のツールです。

Webfontの特徴

• アイコンを自由に組み合わせ

  手元のアイコンを自由に組み合わせて、SVG対応のWebフォントのセットを作成できます。既存のフォントをインポートすることも可能です。

• フォントのカスタマイズ

  アイコンをカスタマイズして、フォントに名前を付けることができます。

• フォントのエクスポート

  フォントには1クリックでエクスポートできます。HTMLやCSSファイルも生成されるので、簡単に利用できます。
  フォーマットは、.svg, .ttf, .eot, .woff, .woff2

• コラボレーション

  メンバーを招待し、チームを作成して、共同で作成することもできます。

Webfontには無料プランと有料プランがあります。
無料プランでもプロジェクト数やフォント数は無制限、ユーザー数も無制限、永遠に無料で利用できます。制限としては、1フォントあたりアイコンが16個までとなっています。
小規模のプロジェクトであれば、16個をセットにできれば十分でしょう。

価格表

Webfontのインストール

Webfontは、macOS 10.12+対応の無料ツールです。
下記ページからダウンロードできます。

Webfont

.dmgファイルがダウンロードできるので、ダブルクリックしてアプリケーションフォルダに移動するだけで、使用できます。

Webfontの使い方

Webfontをさっそく使用してみました。非常に簡単な作業で、アイコンのセットをWebフォントに変換できます。

まずは、Webfontの起動画面。

Webfontの起動画面

「Create Project」をクリックし、プロジェクトを作成します。最初なので、「First」と名付けました。

プロジェクトの作成

「Icons」パネルで、アイコンを登録します。アイコンはドラッグ&ドロップするだけで、簡単に登録できます。ここでは先週紹介した「カメラや写真をテーマにしたアイコン素材」を使用しました。

アイコンのインポート

「Setting」パネルでは、プロジェクトの編集ができます。

プロジェクトの編集

「Export」パネルでは、組み合わせたアイコンをWebフォントにエクスポートできます。「Export & Download」ボタンをクリックするだけで、完了です。

Webフォントにエクスポート

生成されたWebフォントのセットです。Webフォントファイルの他に、実装する際のHTMLやCSSファイルも含まれています。

生成されたWebフォントのセット