PaintFont.comというフォント作成サービスを最近知りました。
このサービスは、手書きの文字でも、イラストレーターなどで作成した文字でも、無料で手軽にフォントに変換してくれるサービスです。
僕も、以前からちょっとフォントの作成に興味があったので、試しに作ってみることにしました。
photo by Connie Ma
目次
フォント作成の主な手順
PaintFontでフォントを作成するのに必要な、主な手順は以下の6手順です。
- 必要な文字を追加して選択
- 不要な文字を削除
- テンプレートをダウンロード
- テンプレートにフォントとなる文字を書き込む
- 文字を書き込んだテンプレートファイルをアップロード
- フォーマットを選んでフォントを作成
これだけの手順がありますが、半角英数字のみのフォント作成でしたら、30分ほどで作ることができました。
※今回僕は、マウスで結構適当に文字を書いたので30分で済みましたが、丁寧に作ると、もっと時間がかかると思います。
では、一つ一つの手順を説明します。
必要な文字を追加して選択
まずは、PaintFontにアクセスして、必要な文字を選択します。
- チェコ語
- ドイツ語
- ギリシャ語
- スペイン語
- フランス語
- イタリア語
- ポーランド語
- ヘブライ語
- ポルトガル語
- スカンジナビア語
- 日本語（ひらがな、カタカナなど、漢字は少ない）
- トルコ語
- キリル文字
- 合字
- 算術文字
- 句読点文字
これらの文字の中から、使用したい文字を選択すると、以下のデフォルトの文字に
追加されます。
日本語には、ひらがな、カタカナ、漢字などもありますが、漢字はかなり少なくこれだけです。
追記：コメントにて教えていただいたのですが、カタカナの「エ」と「ッ」の文字も無いようです。海外サイトとはいえ、カタカナ二文字が足りないという、少し残念な状態になっています。
追記（2015年11月）：「エ」「ッ」「ヰ」「ヱ」の文字は追加されたようです。「ゐ」「ゑ」はまだないようです。
追記（2016年1月）：「ゐ」「ゑ」も追加されました。
とりあえず、半角英数字でよく利用する文字だけを選びたい場合は、デフォルトの文字セットと、「Mathmatics（算術文字）」と「Punctuation marks（句読点系の文字）」を選択しておけばOKだと思います。
プログラムなどで利用する文字などは、たいていこれでカバーできます。
不要な文字を削除
使えそうなフォントセットを追加したら、使用しないフォントも削除することもできます。
クリックすると、確認もなしに削除されるので注意してください。
テンプレートをダウンロード
文字の設定が済んだら、テンプレートを作成しダウンロードします。
ダウンロード前に、以下のようなアドバンス設定をすると手軽に利用できます。
- 「Show Advanced Settings」でアドバンス設定を開く
- 「Output Format（出力フォーマット）」をPNGを選択
- 「Create template（テンプレート作成）」ボタンを押す
「テンプレート作成」を押すと、PNGファイルがZIPファイルに圧縮されて、ダウンロードされます。（※1つのPNGファイルのみの時は、圧縮されません）
テンプレートにフォントとなる文字を書き込む
ZIPを解凍すると、文字数に応じて、以下のようにPNGファイルテンプレートが作成されています。
1つのテンプレートにつき、最大64文字です。
こんな感じのテンプレートです。
これに、文字を書き込んでいきます。（※選択した文字が多少違うので、上のものと配置は違いますが、やることは同じです）
僕の場合は、マウスで書きましたが、「ペンタブレットなどで書いて、自分の筆跡のフォントを作成する」とか、「筆で書いた文字を合成する」とかすると面白いのではないかと思います。
もちろん、イラストレーターや、フォトショップなどを用いてガッツリ作成してもOKです。
文字を書き込んだテンプレートファイルをアップロード
すべての文字を書き込んだら、次は、PNGファイルをアップロードします。
アップロードするには「Upload filled out templates」タブを選択します。
PDFでなく、PNGファイルでフォントを作成する場合は、「Add another upload field（アップロードフィールドを追加）」ボタンを押して、必要なだけの、アップロードフォームを表示させます。
そして、表示させたアップロードフォームに、テンプレートに文字を書き込んだPNGファイルをセットします。
フォーマットを選んでフォントを作成
あとは、最後の仕上げの設定です。
フォント作成時の設定は、以下のようなものがあります。
- Font name（フォントの名前を設定）
- Font file format （OpenTypeフォントか、TrueTypeフォントか）
- Basis font file （追加のテンプレートがある場合）
- Font Family Name （記入しないとFont nameと同じものになる）
- Copyright notice （著作権表記）
OpenTypeフォントと、TrueTypeフォントとの違いは、以下に詳しく書かれています。
TrueTypeとOpenTypeの違いを一言で言えば「形式の違い」です。 どちらもWindowsやMacの中でフォントとして機能する点では同じですが、TrueTypeのほうが歴史が長く、広く普及済みのフォント形式。一方、OpenTypeのほうはTrueTypeの弱点を大きくカバーした新たな形式で、高機能かつ余裕のあるフォント形式となっています。
「Send File」ボタンを押すと、フォントが作成されダウンロードできるようになります。
完成品「ブレ字フォント」
このような手順で完成したのが以下の「ブレ字フォント」です。ただマウスで書いて文字がブレまくっているので「ブレ字」です。
自分で作っておいて言うのもなんですが、酷いフォントです。
以下からダウンロードできます。
[wpdm_file id=7]
ダウンロードファイルを解凍後、フォントをダブルクリックすると、以下のようなフォームが表示されるので、「インストール」ボタンを押すとインストールされます。
試しにテキストエディターに設定
ただ、せっかく作ったのでSublime Textに、以下のようにフォントを設定してみました。
//フォント名 "font_face": "Bureji",
実際にエディターに表示させてみると、ひどさが際立つます。
かつて、これほど酷いフォントがあっただろうか。いやない。
CSSの表示
ブレ字
Ricty Diminished
先日紹介した、プログラミング用フォントのRicty Diminishedだとこんな感じ。
PHPの表示
ブレ字
Ricty Diminished
Ricty Diminishedだとこんな感じ。
自作フォントを使ってみて
ちゃんと作ってないから、読みにくいったらありゃしないです。
日本語のフォント部分は、通常のフォントなんですけど、日本語部分までおかしな文字に見えてしまいます。そして果ては、正しい英数字フォントまでゲシュタルト崩壊を起こし出しました。
自分で多少やってみたことで、ちゃんと作成されているフォントの凄さを身にしみて感じました。
今回の「ブレ字」のようなフォントでプログラムは絶対したくないです。
まとめ
今回作成したフォントの出来はさておき、上記の方法で、僕のような素人でも30分ぐらいで半角英数字フォントを作成することができました。
ペンタブレットや、印刷してサインペンなどで、テンプレートを記入し、それぞれの筆跡のフォントを作ったりするのも面白そうです。（日本語の漢字は少ないけど）
今回のPaintFontは、世界に1つだけしかない、自分だけのフォントを”手軽”に作成するには、かなり便利なサービスだと思います。
paintfont、試させていただきました。
ちょうどいい機会だったのでひらがなとカタカナのフォントを作ろうとしたのですが、２つのカナ文字（エ＆ッ）が日本語を選択しても候補のフォームに出てこないという残念な結果になってしまいました。
ひらがなフォントだけなら現状でも問題なく作れるようです。