無料ではじめるフォント製作マニュアル

拙作スクリプトとwebサービスを利用してフォントファイルを作る方法についてまとめます．通常フォントを作るには専用のエディタを用意する必要がありますが，簡単な利用のために環境を整えるのは面倒です．今回紹介するのは品質はそこそこに，それなりに使い物になるフォントをできるだけ既存の環境を使って作る方法です．自作したフォントが動作するのは見ていてとても面白いので，是非試してみて下さい．

準備

用意するものはこれだけです．後は全てwebページから実行できます．

• フォント化したい画像ファイル（pngとか，svgとか）

step1 フォント化の画像ファイルを用意する

まずはじめにフォント化したい画像のファイルを作ります．画像形式としてはブラウザで読み込める形式であればpngでもjpegでも構いませんが，png形式のほうが良い結果が得られるでしょう．
例えば次のような画像を用意します．

画像の大きさは文字の大きさ×文字数分とします．ここでは200px×200pxの文字を25文字分並べています．このような画像を文字の数だけペイントツールで描いていきます．なおペイントツールは何でも構いません．

なお，svgフォント化したい画像がsvg形式だった場合はstep3’に移動して下さい．

step2 svgフォント化する

下記のアドレスにwebブラウザからアクセスします．対応しているブラウザはfirefox，chrome，operaのいずれかです．

• svgフォント編集スクリプト 

ここでstep1で作ったソース画像を読み込ませます．

 この時，入力設定部の各意味合いは次の通りです．

• 画像選択
  フォントのソースとなる画像ファイルの選択
• ノイズ除去・閾値・αmax・精度桁数
  画像をベクタ画像に変換する際のパラメータ（特に気にする必要はありません．）
  ※詳しくはpotraceで調べてみて下さい．
• 文字サイズ
  1文字のサイズ．この値でソース画像を分割します．
  ここでは200を設定しましたが，用意した画像に応じて変更して下さい．
• フォント名
  フォントの名称．ここでは気にする必要はありません．
  （svgフォントを直接利用する場合は適宜書き変えて下さい）
• オフセット横・オフセット縦
  画像を分割する際の基準位置を指定します．元画像に白枠が存在している場合はこの値を変更して下さい．
• スキップ・文字数
  抽出したい文字の数を指定します．フォントに変換される部分がハイライトされます．
• 開始コード
  文字画像に文字コードを設定する際の先頭のコードを選択します．特に気にする必要はありません．

変換ボタンをクリックすると，出力サンプルにベクタ形式に変換された文字画像が表示されますので，この状態で「次」 ボタンをクリックします．

※なお，「保存」リンク先を拡張子svgで保存してもsvgフォントとして利用できます．

step3 フォントの設定を行う

すると，今度は「svgフォント編集スクリプト」が開きます．

文字一覧に先ほど作った文字が表示されるので，画像の左上の部分に紐付けたい文字を設定します．
必要のない文字があったり，微調整をしたい場合は文字をクリックすることで右側の編集画面で内容を調整することができます．

作業が終わったら右下の「ファイル抽出」ボタンをクリックします．エラーが無ければ右の「保存」リンクが有効となるので，このリンクを右クリックし拡張子svgとして保存します．

※「保存」リンクをクリックした場合，真っ白なページが表示されてしまいます．これはsvgフォントだけが定義されたsvgファイルを開いためで，表示する内容が一切存在しないからです．一般にsvgファイルにはグラフィックが定義されたものと，グラデーションやフィルタだけが定義されたものの2種類が存在します．後者は前者からxlink:href属性から参照されることを前提としているので，ビューアなどで開くと一見何も無いように見えます．

※このファイルの中身はこのような感じです．

文字図形の内容がパス文字列として格納されていることが判ります．

step3' svg画像からsvgフォントを作る

フォントの素となる画像がsvg形式だった場合は，「svgフォント編集スクリプト」から直接フォントに変換することができます．
左上の「ファイル選択」 からsvg画像を読み込ませます．するとsvgファイル内部のパス情報を自動的に文字情報に変換して表示します．

パスの変換仕様は次の通りです．

• svgにfont要素が含まれていた場合，font要素内部のglyph要素を優先して表示します．そうでない場合はpath要素を読み込みます．
• path要素の検索はsvg全体に渡ります．
• 一つのpath要素を一つの文字に割り当てるため，複数のpathから構成されたグラフィックはバラバラになってしまいます．事前にパスの統合を行うようにしましょう．
• path要素のfill-rule属性は無視されます．
• 文字の大きさを自動計算し，最も大きなパス図形をフォント定義のカンバスサイズとします．従って，元となる図形に装飾用のpath要素が存在していると上手く変換できないケースがあります．
• ファイルを読み込む際，文字の位置及び文字の位置や大きさを調整することができます．
  
  • 図形のリサイズ・・・チェックされていた場合，全てのパス図形のサイズをカンバスサイズに合わせます．
  • 基準・・・文字の位置を揃えます．
  • マージン・・・文字の周囲にこの値の分だけ空白を設定します．

不必要な文字があった場合は削除することができます．また，足りない文字があった場合は追加することができます．

文字をクリックすると，内容を編集することができます．

• 基準・マージン・・・文字の位置，サイズを変更できます．値を選択・入力した後「調整」ボタンをクリックして下さい．
  ※繰り返す毎にパス情報が劣化していきますので，注意して下さい．
• 文字外形・・・文字のパス文字列を表示しています．直接入力する方法もありますが，他のツール（例えばinkscape）からパス文字列をコピーし，入力することもできます．なお，そのままではカンバスサイズに収まらないので，上記の調整機能を使って図形の位置・大きさを調整します．
• 更新・・・現在の内容を文字一覧に書き戻します．

作業が終わったらstep3と同様にファイル抽出ボタンをクリックし，svgファイルを取得します．

step4 icomoonでsvgフォントを読み込む

ここまでで作ったsvgフォントは利用可能な環境が限られるため，下記のサービスを使ってより使いやすい形式に変換します．特にwoff形式とttf形式は様々な環境で利用できるので非常に便利です．

• icomoon

左上の「Import Icons」ボタンをクリックし，step3で作ったsvgファイルを読み込ませます．すると，先程作ったフォントが「Your Custom Icons」 に表示されるので，変換したい文字を反転させ，画面下部の「Font→」ボタンをクリックします．

するとこのような確認画面となるので，文字と文字の形が一致していることを確認し，「Download」ボタンをクリックします．なお，その際のパラメータの意味は次のとおりです．

• Baseoline・・・文字を揃える位置を文字の下辺からの％値で指定します．
  このままで問題はありませんが，適宜0としてもよいでしょう．
• Height・・・文字カンバスの大きさを指します．ここでは気にする必要はありません． 
• More Setting・・・フォント名称などを設定します．特に何もする必要はありません．

フォントファイルを格納したzipファイルがダウンロードされますので，適宜この中身を解凍し，通常のフォントファイルと同じように利用します．

ファイル名が「icomoon.xxx」となっているので，適宜書き換えます．

• eot・・・internet explorer用のwebフォント
• svg・・・元のファイルを再変換したsvgフォントファイル
• ttf・・・一般的なos上で動作するフォントファイル
• woff・・・webブラウザで利用可能なフォントファイル

それぞれのファイルの使い方については各自調べて下さい．zipファイルの中身に使い方も同梱されていますので，それを参照してもよいでしょう．

---

この方法で作ったフォントはカーニング設定やベースラインの設定が甘い等，市販されているフォントには到底かないませんが，ちょっとした装飾には十分です．

なお，この方法を使ってアイコンフォントを作る際は，アイコンを定義する文字の選定に注意して下さい．お勧めなのは私用領域（U+E000〜）にアイコンを登録することです．この方法であれば問題が起こりにくいと考えられます．

---

本スクリプトの著作権はdefghi1977が所有しますが，何れもフリーウェアとして自由に使っていただいて結構です．
※potraceの絡みで一部GPLが適用されるものがあります．

本スクリプトを使って作成したフォントは，フォントのソース画像を作った者が著作権を有します．素材画像の選定にはご注意下さい．