Webフォントを作ってみた

SVGファイルを用意する

SVGファイルはテキストなのでメモ帳で直書きすることもできるしツールを使ってもいい。
今回はJavaScriptで作ってみた。

save_svg.html (Chrome Only)
出力したSVGファイルを基に0.svg～9.svgをメモ帳で作る。

1.svg

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="400">
<g fill="black">
<rect x="150" y="75" width="25" height="100"></rect>
<rect x="150" y="225" width="25" height="100"></rect>
</g>
</svg>

4.svg

<svg width="160" height="320" xmlns="http://www.w3.org/2000/svg">
<g fill="black">
<polygon points="120,70 140,50 140,160, 120,150"></polygon>
<polygon points="120,170 140,160 140,270, 120,250"></polygon>
<polygon points="20,50 40,70 40,150, 20,160"></polygon>
<polygon points="20,160 40,150 120,150 140,160 120,170, 40,170"></polygon>
</g>
</svg>

WOFFに変換する

IcoMoonを利用してSVGファイルをWOFFに変換する。
右上の「IcoMoon App」をクリックする。

左上の「Import Icons」をクリックし、0.svg～9.svgを選択する。
Untitled Setにインポートされた10個の画像を選択する。
右下の「Generate Font」をクリックする。

16進の文字コード30～39を入力する。
右下の「Download」をクリックするとicomoon.zipファイルが出力される。

使ってみる

icomoon.zip内のfonts\icomoon.woffを使ったサンプル。
7seg_clock.html
7seg_clock2.html

参考

[自作のWEBアイコンフォントの作り方（無料ツールのみでfeedlyフォントを作る）]
(https://nelog.jp/feedly-web-iconic-font)