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

製作

最終更新日:2020/12/14

ラムネグから一言:寝る前に読むとくだらなすぎて逆に寝れると好評なすごい適当なブログをこっちではじめてます.

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フォント化できました。

【おしらせ、というか完全なる宣伝】

文体がもうぜんぜん適当すぎてあれだけどものすごい自由に書いてるブログ「檸檬だくだく」もよろしく.寝る前に読める恐ろしくくだらないやつです.

こんなにも一ミリも目を引かれないタイトルを取り扱ってます: ああ神様 / CODE:1880 / 赤、アルコール負け /