ゲレの工房

ゲーム好きの中の人が、自分が作りたいアプリを作る記録です

自己流の自作フォント作成:Affinity Designer + Inkscape + FontForge

すごく回りくどい手法を行っていますが

  • Affinity Designer for iPadでデザインし svg形式で画像ファイルを作成
  • Inkscapesvg形式の画像をsvg形式のフォントファイルに
  • FontForgeでサイズなどを微調節してttfファイル(TrueType Font)に

という手法でフォントを作成しようとしています。


Affinity Designer for iPad

概要

Adobe Illustrator 代用の機能を持つAffinity Designer。そのiPad版を使っています。
iPad版を使っている理由は、私が移動中や外出中でも作業できるようにするためです。

インストールはこちら

iPad版には試用版はありませんが、PC用には試用版があります。
またイラレなどに比べて、買い切り型であり値段も安いため、お求めやすいかと。
affinity.serif.com

使用目的

もともとベクター画像作成技術を勉強するためとしてこのソフトを選びました。
今回はフォントの元ピクセル画像からベクター画像を作るために用います。

まぁ、上記ツィートにあるように、ペンでコネコネするわけですね。

Inkscape

概要

これだけでもSVG画像を作れる優れもののフリーソフトです。
こちらのサイトを参考にしました。
risaiku.net

参考サイトではInkscapeだけでフォントを作成していますが、どうしてもUI的にベクター画像を作るには不足しているので、中間作業を行うために今回私は使うことにしました。

インストールはこちら

フリーで使えるため重宝しそうです。
inkscape.org

使用目的

svg形式の画像をsvg形式のフォントファイルに変換するのに使います。使用方法は上記のサイト参照。
ただこの方法ではフォントのサイズがどうしても大きすぎる問題が起きました。
もしかするとAffirinity Designerで作成したSVGを使用してフォントを作成したためかもしれません。
次のソフトでそれを修正します。

FontForge

概要

昔から使われているフリーのフォント作成ソフトです。
日本語の公式ドキュメントが古いのが難点ですが、今でも何とか動作させることが可能です。

インストールはこちら

Windows

公式ドキュメントではCygwinを使うように書いてありましたが、普通にインストーラーがありました。
fontforge.github.io

mac

Homebrewなどでインストールできました。
qiita.com

ただ上記参考サイトではX11を起動してからターミナルからFontForge起動していましたが、普通にアプリケーション内のアイコンダブルクリックで私は起動できました。

使用目的

Inkscapeではフォントサイズがおかしかったのを微調節。
ただFontForgeの仕様なのか、SVGの読み方が少し独特なので、修正が必要になるかもです。

終わりに

今回はこの3つのソフトを使ってフォントを作成しようとしています。目的は英数字フォントなのでそれほど数は多くないのがありがたいかな。
コツコツ頑張ってみます。


広告