💻

【Lato+Noto‘SansJP=LatoSansJP】FontForgeを使った和欧混植フォントの自作

どうも。オオニシタカヤです。
これまで、何度も「Lato」というフォントが好きだと言って、強引に環境を変更してきました。
 
今回は、Latoそのものを改造しちゃいます。あちゃあ。

困った困った

最近、Let’s Notionの制作を再開させたのですが、ある問題に直面しました。
Latoは日本語グリフがないため、PhotoshopなどでOGP画像を作成しようとすると、文字化けしてしまうのです。
仕方なく、NotoSans系のフォントで代用していたのですが、やっぱりNotoSansの英文がちょっとダサいんです;; 加えて、「Notionary」や「Techniques」はLatoだからムズムズするし;;
やっぱこの「Google」キモい
やっぱこの「Google」キモい
 
だからといっていちいち、日文と英文でフォントを変えるのは、かなり面倒くさく持続的じゃないので、フォントを合成する方法を探しました。

ちなみに

Adobeのillustratorとindesignでは、「合成フォント」という機能があり、フォントを選んで分類分けするだけで、混植フォントができちゃうのです。
しかしなぜか、PhotoshopやPremiereProでは対応する兆しなし。Adobeさーん!

フォント編集は「FontForge」一択

和欧混植フォントを作りたくなって、たくさんググってみました。
グーグルさんによると、無料のフォントエディタは、FontForgeが最後の砦らしく、そいつに頼るしかないとのこと。
FontForgeは、丁寧なドキュメントがあまり落ちておらず、質素なエディタを手探りで理解しました。
いかにも古臭いエディタ
いかにも古臭いエディタ

フォントの基礎知識

このサイトのFontForge講座は、初心者に易しくてかなり重宝しました。ありがとうございます;;

フォントには.otfと.ttfの2種類があるらしい

どうやら、フォントのフォーマットは、OpenType(*.otf)とTrueType(*.ttf)の2種類が一般的らしく、前者は3次ベジェ曲線、後者は2次ベジェ曲線を使っているらしい。(らしいです)
OpenTypeは新形式でどんどん主流になってきているものの、互換性のためにotfをttfにしたい人は結構いるみたいです。(みたいです)
(この辺の記事は、直接的な参考にはならなかったけど、fontforgeの使い方にちょっと役立ちました)
FontForgeでotfフォントをtftフォントに変換したという自分へのメモですよこれ。【ubuntu】 - 所感 ~android~
以前紹介した MacType を使ってるんですけども。 chromeアップデートによりchrome+MacType+otfフォントがグダグダになってしまうという罠が増えまして。 otfフォントをtftに変換したわけです。 FontForgeはそんなにしょっちゅう使わないため忘れがちな自分のためにメモ! windows版のFontForgeは動作が不安定ですのでubuntuでやりますよ。 (eyecatchは FontForge 公式ページのロゴを使わせてもらいました!) フォントを自分で作ったり既存のフォントを編集したりできるフォントエディタ。 ファイル形式の変換(OTF, TTF, dfont, SVG等)も可能。 MacOSのフォントファイル形式もサポート。 という大変便利なソフトです。ありがたやありがたや。 ubuntuなのでもちろんコマンドで。 これでおk。 ※インストール後はフォントファイル既定のアプリケーションがFontForgeに置き換わります。 変換のサンプルとして fontopo さんのやつを使ってやってみます。 fontopo | 日本語フォント無料ダウンロード 1, 変換したいフォントを開く フォントファイルを開くかFontForge起動して開くか。お好きにどうぞ。 2, CIDの単一化をする メニュー > CID > 単一化 を実行。 3, フォントを出力 メニュー > ファイル > フォントを出力 を実行。 画像のようにTrueTypeを選び、保存を押す。 ※赤下線を引いてあるValidate Before Savingのチェックは外しておくのが無難。外さないとエラー出まくります。 これでおk。 フォントの種類によっては文字がちゃんと変換できなかったりするので、エラーを見るなりして対策する必要がありますが、たいていのフォントはこの手順でオッケーです。 MacType + FontForgeで変換したttfフォントの組み合わせ でwindowsでも某OSのフォントをキレイに使えたり 快適なフォント生活が送れますね!

CIDフォントとは

CIDフォントの意味は、未だによく分かってません。
👀
CID フォントというのは、主に、グリフ数の多い CJK (中国語/日本語/韓国語) フォントで使われます。 これは、欧文などで使われる通常の CFF 形式を、大量のグリフに対応できるようにした拡張版です。 CID フォントでは、各グリフに、Unicode などとは別に、"Adobe-Japan-6" などの文字コレクションで定義された CID の番号が割り当てられています。 CID は、Unicode とは全く別のものであり、異体字一つ一つに CID が割り当てられていたり、縦書き用グリフにも独立した CID があるなど、Unicode と比べると、一つ一つのグリフが独立しています。 ただし、CID 値自体は、通常のテキスト描画では使われません。 使われるのは主に DTP ソフト上などで、詳細なフォント処理を行う時です。
とりあえず、CIDフォントの場合は、
  • 編集するサブフォントを選択する必要がある
  • 「CID」>「単一化」で非CIDフォントにすることができる。
    • Unicodeが重複するかもしれない
    • エンコーディングがカスタム状態になっているため、メニューの「エンコーディング」>「エンコーディング変換」>「ISO 10646-1 (Unicode, 完全)」を実行し、Unicode に変換する必要がある。
みたいです。

合成の注意点

注意する点は 2点。
  • otfとttfは、EMの値が異なるため、めんどくさい
  • フォントによって、グリフの位置や高さ、深さ、EMの大きさが異なるため、合わせる必要がある。
  • 統合するフォントに縦書き情報がある場合は、縦書きメトリックをONにする必要がある。
    • 「エレメント」>「フォント情報」を開き、「一般情報」の項目の「縦書きメトリックが存在」のチェックを ON
  • そのため、ベースとなるフォントの中に、不要なグリフがないか確認する必要がある。
    • 削除したいグリフを選択して、「エンコーディング」>「グリフの切り離し・削除」を実行

統合時の順番

FontForgeには、「フォントの統合」機能があり、これがまた優秀。 ポイントは、重複するグリフがあったときは、ベースとなるフォントのグリフが残るということ。
今回、日本語グリフのないLatoに、NotoSansJPの日本語グリフだけを入れたいので、ベースをLato、統合するフォントをNotoSansJPにします。

準備

NotoSansJPをotfからttfに

基本的にotfとttfを統合するのはやめたほうが良いらしいので、NotoSansJPをttfにします。
逆にLatoをotfにしたほうがいい説もあるんですが、まじでわからないのでまたやります。

フォントの名前を変更する

「エレメント」>「フォント情報」からフォントの名前を変更しておくといいでしょう。 Latoをベースにしたとき、FontBook(mac)に入れて試そうとしたとき、既存のLatoフォントと干渉してしまうので、この時点から別のフォントとして扱う必要があります。

フォントの大きさを変更する

これも、実際にやってみてわかったことなんですが、フォントってデフォの大きさがぜんぜん違うんですね。
できた!と思ったら全然駄目だった。
できた!と思ったら全然駄目だった。
「エレメント」>「フォント情報」から、フォントの大きさを揃えてあげましょう。
大きい方に揃えるのか小さい方に揃えるのか、ベースを変えるのか統合するフォントを変えるのか、何が良いのかさっぱりわからないので、それは今度試してみます。

統合

ガッチャンコする準備はできたので、フォントを統合!そして書き出し!FontBookに入れて使ってみると…
できた!!かれこれ5時間。おつかれさまでした。
あとは、RegularだけでなくBoldとかもやってみて、バリエーションを揃えてあげましょう。
👀
これは秘密なんですが、FontBookに入れるとき、めちゃくちゃエラー出てました。 試行錯誤してると出ないケースもあったけど、どうしたら出ないかも分かんないので、もうガン無視してます。

その名も

今回作ったフォントは、その名も【LatoSansJP】 。 Webフォントでは、混植の組み合わせとして、よく使われるんですが、実際にフォントを統合したの初めてなんじゃないでしょうか。ニタニタ。
これでPhotoshopでもPremiereProでもStylusでも、自分オリジナルのフォントを使うことができます!嬉しい!

おわり

これを再配布するのは多分アウト?(そこまで利用規約読んでぬ)だけど、個人で使う分にはセーフだし超気持ちいいです。
左より右のほうが、読みやすくて可愛いのわかってくれません?
左より右のほうが、読みやすくて可愛いのわかってくれません?
それでは!LatoSansJPでGoodなライフを!送らさせていただきます!どうもでした!