WebFont（アイコンフォント）をつくってみた

自作アプリケーションのあれやこれやのために描きためたアイコンがお手元にそこそこたまってきました。たとえばこんなかんじのもの。

お手製のアイコンたち

これらのアイコンは主にウェブページで使用され、SVGデータとして管理しているのですが、かねてからWebFontにしたいなと思っていました。理由は以下の通り。

• 色や大きさを簡単に変えられるから（CSSの color font-size などで簡単に変えられる）
• 画像として管理するよりも利用が楽だから（フォントファイルを読めばすぐ使える）

というわけで、WebFontにしてみたのでした。利用できるアイコン一覧はこちら

github.com

このフォントにはまだライセンスを付けていないのですが、基本的には自由に使っていただけるようにするつもりです。

使い方の雰囲気

こんな感じで使うことができます。フォントファイルたち を設置することで、たとえば以下の表記で、ピンアイコン（ ）を設置することができます。アイコン一覧に掲載されているアイコンは、同様に設置できます。

<!-- @font-face の設定などを行うCSSを読み込む -->
<!-- （/fonts ディレクトリにフォントファイルなどの生成物を設置する） -->
<link rel="stylesheet" href="fonts/garakuta-font.css">

<!-- アイコンフォントを利用する -->
<span class="garakuta-font">pin</span>

どうやってつくったの？

webfont を利用させていただきました。指定したSVGからフォントファイルを作成してくれます。assets/svg 配下にフォントにしたいSVGファイルを入れておくことにした場合、以下のようなコマンドでフォントを作成できます。

npm i --save-dev webfont

npx webfont assets/svg/**/*.svg

.webfontrc ファイルを設置することで、設定を書くこともできます。今回はこんな感じに設定してみました。

{
  "fontName": "garakuta-font",
  "dest": "fonts/",
  "template": "css"
}

• フォント名は garakuta-font
• 出力先は ./fonts/
• フォント読み込みの各種設定をCSSファイルとして書き出し

最近ligatureにも対応した ようで、HTML上のコーディングがしやすくなりました。ligatureは複数文字を合わせて1つの文字にすることですが、先ほどの例のように、 pin と書けば、これを一文字にしたが表示されます。pin という文字は、SVGのファイル名から決定されています。

<span class="garakuta-font">pin</span>

今後の予定

まだまだフォント化していないSVGがあるので、コツコツと調整しながら追加していくつもりです。また、そのうちライセンスをちゃんとつける予定です。ではでは～。