25,745 views
この記事は最終更新から 1804日 が経過しています。
1. やりたいこと
オリジナルの WEBフォントを作り、ホームページ上で使いたい。
ホームページ上で手書きのフォントを使いたいことがたまにあるのだが、フリーで公開されているフォントであっても、WEB上での使用時にいろいろと制約があるものばかりで使いづらい。
そこで…
手書きフォントを自作してみたい。
2. 使用するツール
(1) フォント作成ツールの選定
今回はフリーのフォント作成ソフトである fontforge を使う。
商用ツールや フォント作成 WEBサービスなどもあったが、生成したフォントファイルに対して制約を設けていたり、サービスの継続性に疑問があったりしたため、fontforgeを選ぶことにした。
(2) fontforgeをインストール
上記の公式サイトから Windows版インストーラをダウンロードして実行するだけ。
※下記の画面は 2018年10月23日時点のものであり、現在は変更されている可能性あり。
試用するだけなので、寄付画面はスキップ（何も入力せずにボタンを押下）する。
ダイアログが表示されたら「キャンセル」する。
「this way」を押下する。
すると、ダウンロードボタンが表示されるので、これを押下する。
後は、ダウンロードされたインストーラを起動し、インストールを実行すればよい。
3. やってみる
(1) 前準備
1) fontforgeを起動する。
2) 新規作成
[新規]ボタンを押下する。
3) エンコーディングを Unicodeに変更する。
日本語を使いたい（＝ひらがな、カタカナ、漢字を使いたい）ので、エンコーディングを ISO-10646-1（Unicode, 完全） に変更する。
(2) 文字を入力する。
ここから先は地道な作業だ…
JIS第1水準、JIS第2水準などなど、数千文字を入力しなければならない。
今回は初歩の第一歩にチャレンジ中のため、文字コードの上位側にある半角文字をいくつか入力するだけにする。
1) 一文字ずつ入力する。
1. 文字のセルをダブルクリックすると、文字入力画面が開く。
2. 半角文字は幅が狭くてよいので、とりあえず「幅＝512」に設定する。（デフォルトの横幅が1024だからその半分）
・「メトリック」－「幅を設定」メニューで設定できる。
3. ツールボックスから「ペン」を選び、文字を描く。
・ここでは上記 1.でスラッシュを選択したので、スラッシュを描いた。
4. 文字を太くする。
・「エレメント」－「輪郭を太らせる」メニューを選ぶ。
・入門編なのでひとまずデフォルトの設定値のまま [OK] を押下する。
太くなった。
同様の手順で他の文字も入力する。
ここでは $ % & ‘ ( ) * + / 0 1 2 3 4 5 6 7 8 9 : を作成した。
(3) フォントファイルを出力する。
1. 「ファイル」－「フォントを出力」メニューを選択する。
2. フォント名、フォントタイプを入力して [生成] ボタンを押下する。
ここではフォント名を「My1stFont」、フォントタイプを「TrueType」とした。
こんなのが表示されたが今は気にしないでおこう。
(4) 作成したフォントを WEBフォントとして使ってみる。
1) WEB上にフォントファイルをアップロードする。
2) ホームページ上でフォントを使う。
style.css
@charset "utf-8";
@font-face {
font-family: "手書き風";
src: url("My1stFont.ttf") format("truetype");
}
body {
font-family: "手書き風";
}
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="./style.css" /> </head> <body> 明日 2018/10/24 は晴れるでしょう！ </body> </html>
できた！
3) 更に…
前回の (67) TTFファイルをWEBフォント(WOFF)に変換する。 に書いた手順で WOFFファイル化すれば、フォントファイルのサイズを小さくできる。
※fontforgeは出力形式に WOFFを選べない。 (2018年10月23日時点)
@charset "utf-8";
@font-face {
font-family: "手書き風";
src: url("My1stFont.woff") format("woff");
}
body {
font-family: "手書き風";
}
4. 所感
・JIS第1水準、第2水準など、全漢字を入力するのは恐ろしく手間のかかる作業だろう…
・文字作成は、ペンタブレットで入力するのがよいかもしれない。
・文字作成は、紙に書いた手書き文字をスキャンし、Illustrator等で文字のアウトラインをベクタ画像化するのがよいかもしれない。
・まだ未確認だが、fontforgeはベクタデータをインポートできるらしい。
・とにかく恐ろしく手間のかかる作業だ。
→ 気に入ったフォントがあったら買ってしまった方がよいと思った。
でも一つぐらいは自分の手書きフォントを作ってみたい…
なので、今後は効率的な手順を模索して行きたい。
全６回連載
(68) 【オリジナルWEBフォント作り#1】fontforgeを使ってみる。
(69) 【オリジナルWEBフォント作り#2】Illustratorから文字データをインポート
(70) 【オリジナルWEBフォント作り#3】fontforgeでフォント作成時に最初にやること
(71) 【オリジナルWEBフォント作り#4】どれぐらいの大きさで書くか
(72) 【オリジナルWEBフォント作り#5】一先ず半角英数字を作ったけど…
(73) 【オリジナルWEBフォント作り#6】 独自の特殊文字を作ってみる。
今のFontForgeではWOFF出力に対応しています
フォントを出力(Ctrl+Shift+G)からファイル名の下にあるコンボボックスから選べます
Web Open FontでWOFFが生産されます
ありがとうございます。
私も最新版をインストールしてやってみます。