これなら簡単!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のキャプチャ

Webfontの起動画面

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

Webfontのキャプチャ

プロジェクトの作成

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

Webfontのキャプチャ

アイコンのインポート

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

Webfontのキャプチャ

プロジェクトの編集

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

Webfontのキャプチャ

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

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

Webfontのキャプチャ

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

sponsors

top of page

©2019 coliss