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