画像ファイルから無料でフォントを作成する

2013-05-17

フラットデザインが流行ってるようだしシンプルなアイコンの方がいいかな?Retinaディスプレイ用に画像を用意するのもかったるい、なんて考えてるあなた!オリジナルなフォントを作ってみてはどうでしょう?画像ファイル(JPEGなど)から無料でフォントを作る方法を掲載します。

ベクトルなフォントならRetinaの高解像度でもくっきり見えますし、ファイルサイズも抑えられます。

このブログでは、こんな感じの画像ファイルからフォントを作成していく手順を紹介します。

ちなみに、この画像はブログ上は無駄に大きくてもいけないので縮小していますが、実際の作業で使用したのは1000pxくらいのPNG画像です。また、ベクトル化するときに輪郭をトレースしやすくするために、背景は完全な黒(#000000)にしています。

できあがったフォントを表示したのが以下です。input[type="text"]でアルファベットの"a"を表示しているだけなので、続けて"a"を入力したりして確認してみてください。

Inkscapeを起動してページサイズを設定する

フォントを作成するのに使用するのはInkscapeです。Inkscapeを知らない人向けに書くと、 "Inkscape は、Illustrator、CorelDraw、あるいは Xara X と同種の機能を持つ、W3C 標準の Scalable Vector Graphics (SVG) ファイル形式を使用したオープンソース・ベクターグラフィックエディターです。" とホームページに書いてありました。インストールしていない人はググッたりしてInkscapeをインストールしてください。

それではInkscapeを起動します。

画面キャプチャを撮るのに余分なツールバーなどを非表示にしているため、ボタンの配置などが違うかもしれませんが、そのまま進めて行きましょう!ちなみに私が使っているInkscapeのバージョンは0.48でした。

起動直後はページのサイズがA4サイズに設定されているので、縦長の枠が表示されると思います。
ページのサイズがフォントの1文字のサイズになるので、ページサイズを変更するためにInkscapeの上のメニューから「File」-「Document Properties..」を実行してDocument Propatiesダイアログを開き、

Custom size欄に

に設定します。その他の点は変更する必要はありません。このダイアログにはOKボタンなどがなく、変更はすぐに反映されますので、変更が終わったらダイアログの上部の閉じるボタンなどで閉じます。

ページ全体を表示するために上図のように「Zoom to fit page in window」ボタンを押します。
ちなみに今回は正方形の等幅フォントを作りますが、縦長のフォントを作りたいときは、そのサイズに合わせてページサイズを変更してください。文字毎に幅の異なるプロポーショナルフォントを作りたい場合には、最大の幅をもつ文字に合わせた幅を指定しておいてください。

(使用するInkspaceのフォント作成機能だけでは作ったフォント全体が同じ幅をもつ等幅フォントしか作れませんが、テキストエディタで編集することでプロポーショナルフォントに変更可能です。SVGのプロポーショナルフォントを作る参照)

フォントの元になる画像ファイルをインポートする

「File」−「Import」を実行して、フォント化したい画像を読み込みます。

上のダイアログはそのまま「OK」ボタンを押します。

上図のようにページ上に画像がインポートされていることを確認してください。

画像をベクトル化する

作りたいのはTTFなどのアウトラインフォントなので、Inkscapeの強力なビットマップトレースの機能を使ってベクトルデータを作成します。
画像を選択した状態(画像の周りに矢印が付いている状態)でメニューから「Path」-「Trace Bitmap...」を実行します。

とりあえず初期設定のまま「Update」ボタンを押してみましょう。何の変化もない場合には、画像が選択された状態になってないとかだと思いますので確認してみましょう!

標準の設定のままでは、フォントとして使用できるような形でトレースしてくれませんでした。

今回使用したガンプラの画像では、

のパラメータでうまくトレースできました。

一つのパスしかフォントのデータとして使えないので、左上の欄の3つのモード(Brightness cutoff、Edge detection、Color quantization)で実行してください。Multiple scansでカラーとかグレイだとうまくスキャンできても、そのままではフォントデータとして使えません。

(Multiple scansで作った複数のパスの場合、グループ解除して「Path」−「Union」などのコマンドでシングルパスに変更可能ですが、ここでは詳しく紹介しません。)

いい感じにプレビューできたら、「OK」ボタンを押して実際のトレースを実行します。

ページを見ると元の画像の上に、生成されたベクトルのパスが重なっていますので、ドラッグしてずらして形を確認します。
元の画像はこれ以降は使いませんので、削除します。

フォントとして使うときのことを考えながら、大きさを整えたりページの中央に配置したりします。

フォントエディタでフォントとしてベクトルデータを登録する

ようやくここからがフォントを作っていく作業です。AIファイルとか、SVGファイルなどのベクトルデータがあって、そこからフォントを作りたい場合には、ここからの作業になります。

AIファイルなどの場合にはシングルパスでないことがありますので、「Path」−「Union」を実行したりしてシングルパスに編集しておく必要があります。専門家ではないのでよくわかりませんが、Unionを実行してもシングルパスにならなかったりすることも多いので、Unionだけじゃなくて「Path」−「Combine」などのパスのコマンドを色々試してみてください。(シングルかマルチか区別する方法は、下の方に書いてます。)

メニューから「Text」−「SVG Font Editor...」を実行すると、上図のように右側にSVG Font Editorペインが表示されます。

図のように、ペインの左下の「New」ボタンを押して、その上に新規にfont1を作ります。必要に応じてFamily Nameを編集します。なお、このFamily Nameはcssで指定するfont-familyとは直接関係ありませんので、標準のままで進めても問題ありません。

Set widthは、フォント全体の文字幅を指定するところなので、ページ幅と同じ1024のままでOKです。

SVG Font Editorペイン上部の「Glyphs」タブをクリックして選択し、下部にある「Add Glyph」ボタンを押し、追加されたglyph1の右側の欄(Matching string)に"a"(半角小文字)と入力してリターンキーを押します。(リターンしないと、確定しません)

Matching stringで"a"を確定したら、下の黒い四角が並んでいるところで、2番目の四角が無くなります。
これは、"Sample Text"っていう文字を、現在作成しているフォントで表示した時のプレビューで、無登録の文字については黒の四角で表示している状態です。つまり、"Sample"の2文字目が"a"で、上記の作業で"a"の文字については未登録じゃなくなったのでプレビュー表示が変わったってことです。(なんかうまく説明できてませんが、意味不明でもそのまま続けて問題ありません)

ここでMatching stringって書いてあるので、もしかしたら"Gundam"みたいな文字列でもいけんじゃね?と思ってやってみたら、このInkscape上のプレビューでは表示されますが、実際のフォントとしてはうまくいきませんでしたので悪しからず。

SVG Font Editorペインの下部の「Get curves from selection...」ボタンを押すと、そのボタンの下のプレビュー欄が変化するのが分かります。ここで、"Get curves from selection"の"selection"っていうのは、ページ上で選択されているパス(ベクトル図形)のことなので、上図のようにちゃんとパスが選択されていないと何も起きません。

パスを選択し、glyphもちゃんと選択しているのにプレビューが変化しない場合

パスがシングルではなくて、マルチパスになっていると思います。このブログの手順どおりにやってるとシングルパスが生成されるんですが、AIファイルなどをインポートした場合などにははまりやすい罠です。

何回も「Get curves from selection...」ボタンを押してもダメな場合には、メニューから「Object」−「Ungroup」(グループ化を解除)したり、「Path」−「Union」などのコマンドでシングルパスにしてから再チャレンジしてみましょう!

Inkscape上で丸とか四角とか線とかのオブジェクトを描いて、それをフォントにする場合にも、同じような感じでシングルパスにしてください。

別の文字をフォントに登録する

別の文字を作りたいってことは当然、別のパスを用意する必要がありますので、"a"を作ったときとは違う画像を用意するなどしてシングルのパス(ベクトル図形)を作ります。

あとはSVG Font EditorペインのGlyphsタブ内の「Add Glyph」ボタンを押して、"a"とは違う文字("b"など)を追加します。プレビューしながらやった方がいいので、Preview Text欄には、その文字を入力しておきます。

これで「File」−「Save」などしてSVGファイルとして保存すればこのファイルはSVGフォントとして使うことができます。

SVGフォントからTTFフォントに変換してWebフォントとして使う

お手軽にフォント形式を変換してくれるWebサイトがいっぱいありますが、SVGフォントからTTFフォントに変換するのにおすすめのサイトはFreeFontConverterです。上記で作ったSVGファイルをアップロードして、そのまま「Convert」ボタンを押せば変換されたTTFフォントをダウンロードすることができます。

あとは一般的なフォントと同じように以下のようなcssフォントの設定をすれば大丈夫です。もし、Windows IE用のOTFフォントとか他の形式も欲しいならFont SquirrelのWebfont Generatorを使ってみるのも良いと思います。

@font-face {
  font-family: "gundam";
  src:url('gundam.ttf') format('truetype');
}
#gundam {
  font-family: "gundam";
}

なおローカル環境でTTFファイルをインストールしないでHTMLファイルと同じフォルダなんかに置いた状態でcssフォントの設定をしても表示されませんので、フォントをインストールして確認するか、サーバ上にアップしてからちゃんと表示確認しましょう!

@font-face {
    font-family: "gundam";
    src:url('gundam.ttf') format('truetype');
}
#gundam {
    font-family: "gundam";
}
SVG