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

このブログでは、http://fontello.com のWebフォントを利用しています。FacebookやTwitterなど使いたいアイコンだけ選んで単一のフォントファイルとしてダウンロードできるので無駄がありません。

しかし、はてなブックマークのアイコンがなくて不便だったので、fontello.comのカスタムアイコンで作成してみました。

SVGファイルの準備

まず、Webフォントのソースとして、SVGファイルを用意します。はてなブックマークのロゴは、公式サイトでSVGファイルが配布されています。

zipファイルをダウンロードし、解凍したファイルの hatenabookmark-logomark.svg を今回は使います。

これをそのままfontello.comで変換できれば、一番楽だったのですが、残念ながら、そのままではアイコンの一部が崩れてうまく変換できません。

そこで、SVGファイルを仕様に合うように編集します。ここではInkscapeを使いますが、SVGが扱えるソフトならなんでもいいでしょう。

hatenabookmark-logomark.svg をinkscapeで開くとこんな感じになっています。

このSVGは、複数のオブジェクトで構成されています。背景の四角のオブジェクトの上に、 Bと!のオブジェクトが重ねてあります。この構成だとうまく変換できない場合があるようです。

わかりやすく分解してみました。Bと!をグレーにしています。

fontello.comで確実に変換するためには、複数のオブジェクトを統合して、単一のオブジェクトへ構成し直します。つまり、背景のブルーの四角形を、Bと!の形の穴が空いている状態へ変換するのです。

手順はとても簡単。

これで編集は完了です。3番目でオブジェクトが画面から消えてしまっても、安心してください。

アウトライン表示に切り替えれば、オブジェクトが存在していることは確認できます。(メニューの「表示 > 表示モードのアウトライン」を選択するか、 Ctrl + 5 を何度か押せば、アウトライン表示になります)

線の上をダブルクリックすると、一つのオブジェクトに統合されていることが確認できるでしょう。わかりやすく色をつけても問題ありません。

最後に編集したファイルを「名前を付けて保存」します。保存形式はプレーンSVGを選らんでください。 (はてなのSVGファイルは元がプレーンなので、そのままInkscape SVGで保存してもfontelloでは使えましたが)

fontello公式ページの説明にも、手順が載っていますが、Inkscape形式のSVG用なので、もう少し手順が多いです。今回のケースでは、うまくいきませんでした。なぜだろう？ How to use custom images · fontello/fontello Wiki

それでは、Webフォントへ変換してみましょう。

http://fontello.com にアクセスして、保存したファイルをドラッグ&ドロップしてください。ドラッグするとページの背景がイエローに変化しますので、ドロップすればいいだけ。 Custom Icons のカテゴリーにフォントが追加されるはずです。

画面右側に赤い文字で次のようなメッセージが表示されますが、まさにこの対応をinkscapeでしていたわけです。

If image looks not as expected please convert to compound path manually.

追加されたフォントの選択して編集ボタンを押すと次のような画面が表示されます。名前は適宜、編集してください。

この例では、Default(css) name にhatebuとしていますので、css selectorは .icon-hatebu になります。

あとは通常のWebフォントと同じように組込みすれば、使えるようになります。

このようにSVGファイルさえ用意できれば簡単にできるので、調子の乗って、このサイトのアイコンをWebフォントにしてしまいました。 → オリジナルのWebフォントをつくろうその２