オリジナルのWebフォントをつくろうその２

前回の記事では、はてなブックマークのWebフォントをつくってみた話の続きです。

SVGファイルさえ用意できれば簡単にできるので、調子の乗って、このサイトのアイコンをWebフォントにしてしまいました。

オリジナルのWebフォントをつくってみる

こんなに簡単にWebフォントが作れるということは、自分で作成したSVGファイルもWebフォント化できる!

マイWebフォントをつくってみたい衝動が抑えきれず、特に必要もないのに、このサイト用にinkscapeで適当にでっちあげた次のアイコンで試してみました。

これを、単一のオジェクトで構成できるように修正しましょう。はてぶアイコンでの作業に加えて行った作業を説明しておきます。

ストロークで線を描いている箇所はパスへ変換しておきます。

つまりをにするということです。

前述のサイトによると、ページの高さは1000pxにするのが推奨なのだそうです。小さすぎるサイズは避けたほうがいいようです。今回は、はてなのSVGが500pxだったので、それに合せて変換しましたが問題ありませんでした。

ページサイズの単位がインチだと、Webフォントのレイアウトが崩れていました。うまく変換できない場合は確認してみてください。

色の情報はそもそ変換には関係なさそうですが、どんな感じになるかを見るのに黒色にしました。

変換と直接あるかわかりませんが、ファイルに残っている未使用のpatternsやgradientsを消すために、inkscapeのメニュー「ファイル > ドキュメントのクリーンアップ」を実行しておくのも覚えておくといいと思います。

ということで、変換したフォントはこんな感じです。

アイコン
アイコン
アイコン

Webフォント化を前提してデザインしていないので、標準サイズだとなんのマークだかさっぱりわかりませんね。だけど、いろいろ遊べそうなので、楽しいおもちゃを見つけた気分です。