1. ホーム
  2. コラム
  3. 簡単につくれるWEBフォント!!!!

簡単につくれるWEBフォント!!!!

WEBフォント生成サービス「IcoMoon」を使った、イラストのFont化をご紹介します。
「IcoMoon(https://icomoon.io/app/)」


1.イラストを描く!

Illustratorでアイコンを描きます。複数のバリエーションをセットにしたい場合は、アートボードを分けると便利です。


2.SVG形式で保存

「塗り」を「#000000」にして保存します。

「アートボードごとに作成」にチェックを入れ、「SVG形式」で保存します。このときに付けるファイル名は、フォント名にはなりません。

SVGオプションを指定します。項目の詳細は割愛しますが図のとおりです。

さらにオプションが出てきます。項目の詳細は割愛しますが、精細なイラストレーションの場合は「小数点以下の桁数」を増やします。値が大きいほど精度が高くなりますが、ファイルは重くなります。

ファイルが生成されます。


「IcoMoon」にアクセス!

IcoMoon」にアクセスします。こんなページです。


3.イラストをUP!

ファイルをUPすると上部に表示されます。少し小さいので、編集したほうが良さそうです。


4.サイト上で調整!

編集画面では、大きさや位置や角度などが変えられます。

すこし大きくしました。


5.Fontファイルを生成!

Font化するグリフを選んで、右下の「Generate Font」をクリックします。

一覧が出てきます。

割り当てたい文字を入力します。今回は装飾文字なのでそれぞれ「W」「M」「K」「B」としました。

ここでフォント名を付けることになります。「Preferences」をクリックすると入力画面が出ますので、命名したら右下の「Download」をクリック!

落ちてきたZIPの中に、「TrueType Font(PC用)」と「WOFF(WEBフォント)」が入っています。

6.使ってみる!

「genderFonts.ttf」を開くと、「W」「M」「K」「B」の文字にグリフが割り当てられていることが確認できます。

「genderFonts.woff」も、WEBフォントとして動作しています。

余談ですが、「genderFonts.ttf」はPCにインストールできるので、WEBページ内においてよくつかうアイコンやオーナメント、装りケイなどをFont化しておくと、文字として呼び出して使うことが出き、文字サイズで大きさを制御できるので便利です。今回は、よくある性別品揃えアイコンぽく使ってみました。

お役立ていただければ幸いです。

メールでのお問い合わせ

■コラム執筆者

第1ビジネスユニット アカウントサービス第11ユニット 小林 直登

RSS