画像からSVG作ってそれをWEBフォントに変換する方法

jpeg画像やらpng画像からSVG作ってそれをさらにWEBフォントに変換する方法です。

1. インクスケープ
2. Icomoon

画像は用意してもらうとして使うのはインクスケープっていう無料の画像編集ソフト（イラレの無料版的なやつ）とIcomoonっていうブラウザ上で使うWEBフォントを選べるサービスの2つだけ。Icomoonも無料です。

んじゃ具体的な変換方法を。

1. インクスケープでSVG保存
2. IcomoonでWEBフォントに
3. あとは使うだけ
4. まとめ

インクスケープでSVG保存

まずは画像をインクスケープでSVGに変換しちゃいます。

インクスケープダウンロードサイト – https://inkscape.org/ja/

インクスケープで画像を開いて、んで「ビットマップのトレース」。これだけで画像ファイルがSVGデータに変換されます。SVG化したやつと元の画像の2つがあるんで、元の画像は消してOK。

ただこのままだと保存範囲が大きすぎるんで、プロパティでサイズをよき塩梅に変える。

ここまで出来たら普通に保存。※エクスポートじゃないです。

保存のファイル形式は最初InkscapeSVGになってるんで普通のSVGに変えて保存。

IcomoonでWEBフォントに

インクスケープでPNG,JPEGからSVGへ変換が出来ました。

次はこのSVGをWEBフォントに変えていきます。ここで使うのが2つ目の無料サービス、Icomoon。

Icomoon – https://icomoon.io/

Icomoonのページ右上の「Icomoon　APP」クリック。

お次は左上の「Import Icons」クリックでさっき作ったSVGを選択。これだけでさっきのSVGがIcomoonに読み込まれます

あとはその取りこまれたアイコンをクリックして選択、画面右下の「Generate Font」を押してんで何も考えずそのまま「Download」でOK。

なんか文字コードやら四角っぽい文字化けっぽいの出てきてるけど、これはどの文字コードに対応させますか、て部分。変えてもなんも問題ない…はず。

いじっちゃったじゃん！変な文字コードとアイコンになっちゃったじゃん！て場合、問題はないけどモヤモヤする。

こんな場合はニコちゃんマーク押してそのまま右上のバッテン押せば元の文字コードに戻る。お試しあれ。

あとは使うだけ

あとはほかのWEBフォントとおなじでホームページで使うだけ。おしまいおしまい。

まとめ

JPEGやPNG画像をWEBフォントに変換する方法を紹介しました。

いったんインクスケープでSVGに変換っていう手順をかまさないといけないのが面倒だけど、思ったより簡単にWEBフォント化できました。