完全無料:windowsでフリーソフトだけで作る自作フォントの作り方
自作フォント作成といえば、FontForgeなどでしょうが、Windows環境での使用は大変、ということで、Windowsなパソコンでも簡単に、そして無料で作成できるInkscapeというフリーソフトを使って
世界で一つ、あなただけのオリジナルフォントを作ってみましょう♪
≪注意事項≫
この記事には間違いや誤った表記がある場合があります。
またこのサイトにしたがって実行した結果生じたいかなる損害・損失等に サイト関係者・作成者は一切責任を持てません。
やってみようという方は、自己責任で、という認識のもとでお願い致します。m(_ _)m
ペイントソフトなどで文字の画像ファイルを作成せずに、直接Inkscapeで文字を作成したい人は
５.InkscapeでSVGフォントエディタを利用してフォント作成からやってみてね。
Inkscapeでの文字や図形作成の仕方はInkscape解説サイトや インクスケーパーや「Inkscape 使い方」で検索してみてね。
≪もくじ≫
１.使用するフリーソフト（準備）
２.文字を画像ファイルで用意する(画像ファイルを使用する場合)
３.Inkscapeで画像読み込み(画像ファイルを利用する場合のみ)
４.Inkscapeで画像ファイルを「ビットマップをトレース」で変換
５.InkscapeでSVGフォントエディタを利用してフォント作成
６.外部サイトのサービスを利用しsvg→ttfへ変換する
７.メモ帳などでインストールした自作フォントが動作するか確認！
１.使用するフリーソフト(準備)
1.Inkscape/Inkscape日本語版2.GimpまたはMSペイント
※ペイントソフト(お絵かきソフト)を利用して文字を画像として描いても良いですし、
Inkscapeを使って直接文字を描写しても構いません。
２.文字を画像ファイルで用意する(画像ファイルを使用する場合)
ここでは気軽に使えるペイントで試します。windows左下にあるウィンドウズロゴマーク(スタートボタン)
→ 「すべてのプログラム」 → 「アクセサリ」 → 「ペイント」 と順番にクリックするか、
「windowsボタン＋R(名前を指定して実行のショートカットキー)」→「mspaint」と入力して
OK(Enterキー)でもペイントが起動出来ます。
→参考：ファイル名を指定して実行ダイアログから起動するプログラム一覧
ここではフォント作成のため、画像サイズを1000px×1000pxで作成したいと思います。
赤丸で囲ってある部分の「サイズ変更」をクリックし、出てきたウィンドウの単位を「ピクセル」に、上側の水平方向(H)と垂直方向(V)をそれぞれ1000に指定しOKをクリックします。
好きな太さのブラシや図形で好きな文字を試しに書いてみましょう。
キャンバスが大き過ぎたら虫眼鏡ツールを選び右クリックで小さくなると思います。
フォントにするための好きな文字や画像が描けたら、画像ファイルとして保存します。
保存形式は何でも良いですが、とりあえず図形にはPNGが良いかもしれません。
ということで、メニューから「名前をつけて保存」→ＰＮＧ画像を選びます。
これを一文字ごとに繰り返してください。
まずは要領を把握するため、少なめの文字数分の画像を作成します。
ここでは「ごっくー」の４文字分を試しに作成してみました。
......
.....
..... 
画像はペイントソフト(ＭＳペイント)以外でも、各自お使いのソフトで作成してください。
３.Inkscapeで画像読み込み(画像ファイルを利用する場合のみ)
ここから作業をInkscapeに移します。Inkscapeを立ち上げてください。実行ファイルはデフォルトでインストーラーを使ったなら
「C:\Program Files\Inkscape\inkscape.exe」あたりにあるかと。
「Winボタン＋R(ファイル名を指定して実行)」→上の実行ファイルの場所を入力してＯＫでも起動できるかも。
まずサイズを1000px×1000pxにするために、メニュー項目の「ファイル」→「ドキュメントの設定」をクリックします。
「ドキュメントの設定」というウィンドウが表示されたと思いますので、
その中の赤丸で囲った部分「カスタムサイズ」を高さ、幅ともに1000にします。単位は「px」です。
OKボタンはありませんのでウィンドウ右上のＸ(バツ)ボタンで閉じます。
次に画像を読み込みます。(画像を使用する場合のみ)
画像を読み込ませる方法は２通りです。
作成した画像ファイルをInkscapeのウィンドウ内にドラッグアンドドロップするか、
先程と同じようにメニュー項目から「ファイル」→「インポート」をクリックします。
するとファイル選択ダイアログが現れるので先ほど作成した文字画像ファイルを選択してください。
ＭＳペイントで作成・保存した場合はマイピクチャーでしょうか。
さて、こんな確認ダイアログが表示されましたか？
画像のリンクまたは埋め込みの選択で「埋め込み」を選択しＯＫをクリックして下さい。
この一連の作業、ファイル→インポート→画像選択→埋め込みを選択→ＯＫ
を文字画像部分繰り返します。または文字画像を全部一気にドラッグして選択した後、
Inkscapeウィンドウにドロップして放り込んだ後、埋め込みが選択されているのを確認してＯＫを連打しましょう。
４.Inkscapeで画像ファイルを「ビットマップをトレース」で変換
画像ファイルを文字数分読み込んだら次は画像ファイルを文字データとして登録できるように変換します。
変換したい画像をクリックし選択状態にしてから、
メニュー項目の中の「パス」→「ビットマップをトレース(T)」をクリックするか、
「Shift＋Alt＋B」のショートカットキーを同時押ししてみましょう。
「ビットマップをトレース」のウィンドウが表示されたと思います。
「明るさの境界」が選択されているのを確認して、そのままＯＫをクリックすると、
上図のように選択枠の境界線が画像全体から、
画像本体(黒い部分)を取り囲むように小さくなっていれば成功です。
この変換ダイアログ「ビットマップをトレース」のウィンドウを表示させたまま
読み込んだ画像ファイル全部を変換してしまいましょう。
変換前の画像を選んでから「ビットマップのトレース」ダイアログから「ＯＫ」を選び、
変換されていれば、変換前の画像は選択してから[Deleteキー]を押して削除して大丈夫です。
今回は「ごっくー」の４文字を変換し、変換前の４つのオブジェクトは削除しました。
５.InkscapeでSVGフォントエディタを利用してフォント作成
さて、いよいよ文字をフォントとして登録してみましょう。画像ファイルを用いずに、Inkscapeで文字を作成した場合は
そのままこの手順で作成したオブジェクト(図形や文字)をフォントとして登録出来ます。
ではメニュー項目の「テキスト(T)」→「ＳＶＧフォントエディタ」をクリックします。
するとInkscapeのウィンドウ右側にこんな項目が表示されたでしょうか？
初期状態では「全体設定」のタブが選択されているかと思います。
まだフォントを何も作成していない状態なので、まずは赤枠で囲った「新規(N)」をクリックします。
「フォント１」が作成され、ファミリ名が初期状態では「SVGFont 1」となっていますが、ここは自分の好きな名前に変更出来ます。
ここでは「ごっくーフォント」という名前にしてみました。
次に「グリフ(G)」タブをクリックしてください。
「グリフを追加」ボタンを文字を作成したい文字数分押し、
「マッチング文字列」の項目に画像を割り当てたい文字を打ち込みます。
「マッチング文字列」はグリフ１やグリフ２の右側の空白をダブルクリックで編集できます。
図では「ごっくー」の４文字分の図形を文字に割り当てたいので、図のように指定しています。
次に画面下部にある「プレビューテキストの項目に」割り当てたい文字列をすべて入力しておきましょう。
この部分に割り当てたい文字列を入れておくことで、正常に図形がフォントとして割り当てられたかを視覚的に確認することが出来ます。
図のように、正常に割り当てられた文字列は割り当てた図形(自分で作成した文字)がプレビューに表示されますが
未割り当ての場合は黒く塗りつぶされていますね。
では早速、自分で作成した図形(文字)をフォントに割り当てていきましょう。
割り当てはカンタン、割り当てたい図形を選択し、適切な大きさや形に調節した後、
「SVGフォントエディタ」項目(Inkscapeウィンドウ右側の欄)で、
割り当てたい文字列のグリフ項目を選択してから、 上図にある「選択オブジェクトから曲線を取得...」ボタンをクリックします。
ここでは自分で作成した図形「ご」を、グリフ１のマッチング文字列「ご」に割り当てたいので、
図形「ご」を選択した後「グリフ１のご」を選択し、「選択オブジェクトから曲線を取得...」をクリックします。
この、図形を選択→該当グリフ項目を選択→「選択オブジェクトから曲線を取得...」をクリック、
という一連の動作を文字数分繰り返し、すべての文字列をフォントに割り当てていきましょう。
すべての割り当てが終わったら、いよいよ保存です。
その前に正常に割り当てられているか、「プレビューテキスト」の項目で確認して下さいね。
さて、保存はメニュー項目左「ファイル」→「名前を付けて保存(A)」をクリック
または「Shift＋Ctrl＋S」のショートカットキーで行えます。
（ふつうに「保存」or「Ctrl＋S」でもＯＫ）
保存ダイアログが現れるので、ファイルの種類に「Inkscape ＳＶＧ(*,svg)」が選択されていることを確認し、
「保存(S)」ボタンをクリックして任意の場所(自分がわかりやすい場所:デスクトップ等)に保存しましょう。
６.外部サイトのサービスを利用しsvg→ttfへ変換する
保存したSVGファイルをwindowsでフォントとして扱うためにはttfという形式のファイルへ変換しなくてはなりません。
そこで、SVGからttfへの変換サービスを行ってくれるネットサイトを利用します。
今回はこちらのwebサービスを利用させていただきます。
Free Font Converter
上記サイトがリンク切れの場合は「svg ttf 変換」などのワードで検索するとそういったサービスやフリーソフトが見つかるかと思います。
こちらでも念のため他のネットサービスを挙げておきます。
フォントファイルのフォーマットを変換
Font Converter.org
どのサイトを利用しても構いませんが、
変換元は必ず「svg」で変換後は「ttf (True Type Font)」を選んでください。
変換が成功すれば、自動的にダウンロードされるか、ダウンロードファイルへのリンクが
表示されているはずなので、それをクリックしてttfファイルをダウンロードしましょう。
ファイル名が日本語の場合文字化けしているかも。気になる場合は名前を修正しておいてね。
ダウンロードしてきたファイルを右クリックして出て来たメニューから「インストール(I)」を選ぶか、
若しくはttfファイルをダブルクリックで開いてみると、こんな感じ。
赤枠で囲った文字は自分で作った文字なので☆マークがついてます。
フォント名は「ファミリ名」で指定した名前が表示されているはず、
ここでは「ごっくーフォント」という名前にしてあります。
これで間違いなければ「インストール」ボタンをクリックしてインストールしてみましょう。
７.メモ帳などでインストールした自作フォントが動作するか確認！
さて、実際にインストールした自作フォントが正常にソフトなどで使えるかどうか確認してみましょう！試しに、手近なwindowsのメモ帳を起動してみます。
「Win＋R」(ファイル名を指定して実行)→「notepad」と入力してＯＫを押すか、
スタートメニュー(タスクバーの左、画面の一番左下のWindowsロゴマーク)から
「すべてのプログラム」→「アクセサリ」→「メモ帳」をクリックして起動できます。
メモ帳が起動できたら、メニュー項目から「書式」→「フォント(F)」をクリックします。
フォントのウィンドウが現れたら、フォント名(F):の下のインプット欄に、
自分で決めたファミリ名(変更してなければSVGFont 1)を入力すると、
正常にインストールされていれば、下のフォント一覧から該当するフォントがリスト欄に表示されます。
今回は確認のため、文字サイズ(画面一番右)の項目を４８に指定してみました。
さて、ＯＫボタンを押してフォントウィンドウを閉じます。
いよいよ確認です。
自分で登録した(割り当てた)文字列を入力してみてください。
ここでは「ごっくー」と入力してみます....すると？
わ～～～！表示されていますね！感動っ！素敵っ！！
みんなも是非やってみてね☆☆
ちなみに今回は大まじめに「ごっくー」の文字をほぼアレンジせず作っちゃいましたが、
もっとアーティスティックにしたり、いっそ記号とか絵文字とか、
アイデア次第で何でも出来ると思います。
世界で一つ、あなただけのオリジナルフォントを是非つくってみてくださいね☆
参考サイト一覧
ttfフォントを自作する簡単な方法
≪ページ最上部へ戻る≫ ≪→writingへ戻る≫