FontForge2023のUIのフォントの変更にあまりにも手こずった話

# はじめに
2023年1月ごろ、今まで2020年バージョンのFontForgeを使っていた私は、最新ビルドであるFontForge January 2023 Releaseをインストールした。開いてみるとUIのフォントが大きく変わっており、ラテン文字等の可読性が向上していそうだった。(下は比較画像) 
![Fontforge記事 ビルド比較.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3197856/277a2a46-1ee4-a5d8-0036-422eb1693fb8.png)
他にも、今までは不十分だったメニューバーの翻訳も向上しており、日本語で表示できるメニューが増えていた。
むしろなぜ今までGitHubを覗かなかったのか、そう考えてフォントを作成していた。

それはそれとしていいのだが、使い始めて数ヶ月にして問題点がいくつかあることに気が付いた。しかも私にとってはわりと厄介。

# 問題点
<dl>
<dt>文字のウェイトが太く、漢字などが読みにくい</dt>
    <dd>UIのフォントのウェイトが太いため、ラテン文字等ならそこまで気にならないが、漢字等の複雑な字になると潰れてしまい、見にくい。</dd>
<dt>ラベルに一部文字が表示されない</dt>
    <dd>今までも表示されない文字はちょくちょくあったが、2023ビルドになってからそれが異常に増えた。特に、ハングルは表示されていたのにすべて表示されなくなった。</dd>
<dt>ディセンダーがアウトラインプレビューに食い込む</dt>
<dd>特に酷いのがコイツで、とても見にくい。</dd>
</dl>
参考画像

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3197856/12b939df-a5e0-8b1e-ae19-bd6f666d0487.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3197856/96eedc8c-e17e-4cf8-b481-65915826480b.png)
こんな感じで食い込まれては、見にくくてしょうがない。

ということで、
｢前掲の問題が起こった原因は**UIのフォントが変更された**ためではないか｣
と考え、
｢UIのフォントを変更する方法｣
を模索することにした。

# フォントを司っている設定を探す
なんかそういう設定項目があるという記憶があったのでまずそれを探すことに。
ここでまず1つ目の手こずりポイントがあった。
**設定項目の名前が変わっている**のである。
![FF 設定比較.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3197856/fb945ec1-4838-f0b0-e238-dc1269b5351d.png)
2023版で**Appearance Editor...** となっているのがUI等を司っているところであったので、どうせ2020版でもその辺にあるだろうと思って**X Resource Editor...** を覗いてみたらビンゴだったので、手こずりポイントの中では割と楽な方だった。

# 開いてみたはいいものの……
さて、開いてみたはいいものの、更にまた手こずりポイントが出てきた。
**どこをどのように変えたらいいかがわからない**のだ。
ということでここからは長いリサーチと試行錯誤の繰り返しである。

# まともな情報源があまりにも無さすぎる件
ということで**Appearance Editor**(2020版なら**X Resource Editor**)を開いたところまで。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3197856/27d00781-0e38-cb5a-5513-be3128ca53df.png)

なにやら*Press the help key or F1 to open a web page about this tool.* と書いてあったためF1キーを押してみると、https://fontforge.org/docs/ui/misc/resedit.html に飛ばされた。
んでここにはいろいろな項目の意味がざっくりと書いてあるようで ｢よし、ここにフォント名を打ち込んでやれば変わるんだな！思ったよりすんなり変えられそうで良かった！｣と思い、"LabelFont"部分を"400 12pt Noto Sans CJK JP" と書き換えた。(なお、この時点で400 12pt の意味は理解していなかった。)
意気揚々と保存をしたが、見た目は何も変わっていない。なんでだ。とりあえず困ったら再起動を実行することに。

再起してみると、やはり変わっていない。なぜだ。
Appearance Editorを確認してみると、なんとびっくり、**設定が元に戻っている**ではないか。

変わらなかった原因は｢書き換える場所が間違っている｣からではないか。
https://fontforge.org/docs/ui/misc/resedit.html を見返してみると、https://fontforge.org/docs/ui/misc/xres.html へのリンクがあった。
結論から言うと通常、LabelFontはDefaultFontがコピーされる(要するに同じフォントになる)ということらしいのでDefaultFontを変えて再び保存&再起動。

だが結果は変わらない。フォントは変更されないし、書き換えた部分は書き換える前に戻ってしまった。
こうなったら公式のドキュメントはあまり参考にならんなと思い、適当に英語で｢How to change fontforge UI font｣なんかで検索したらそれらしい説明が書いてありそうなサイトが出てきた。
https://www.fonttutorials.com/change-user-interface-fontforge/

# ここを参考した結果ついに…… 
このサイトの**Display Font - Lookups**という項目内にフォントの変更方法が記載されていた。
どうやら**X Resource Editor**(2023版ならAppearance Editor)までは同じだが、**一度ファイルとして出力し、それをテキストエディタで記載を変更し、そのファイルをリソースファイルとして読み込ませる必要がある**ようだった。(じゃあ今まで弄ってたところは何だったんだ。)
ということでファイルとして出力し、テキストエディタで開いた。
(ちなみに、サイトで弄られているFontForgeと私が使っている2023版ではかなり記法が変わっているようだった。)

サイトでは**FontInfoという設定のウィンドウのフォントを変える方法**として紹介されていて、**fontforge.FontInfo.Font:～～～**という箇所を変えていた。
なるほど、**fontforge."ウィンドウ名".Font: "フォント名"** で変わるのか。と理解した。
そして、私がフォントを変えたいと思っているウィンドウの名前は**Font View**と言うらしい。

ここで、もう一度**Appearance Editor**の画面を見てほしい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3197856/27d00781-0e38-cb5a-5513-be3128ca53df.png)
左の項目に**Font View**とあるではないか！
ということでおそらく出力したファイルの中に**fontforge.FontView.Font: ～～～** 的なものがないかと探したら、まさに推定通りの記述があった。

ということで**fontforge.FontView.Font: ～～～**(出力したファイル内の25行目)の部分。**～～～**を**100 12pt Noto Sans CJK JP Regular**に変更した。
(ちなみに、100とか400はウェイトを表しているらしいが、あまり良くわからなかった。)
変更したファイルをとりあえず**settings1**という名前をつけて保存。
そしてこれを**環境設定>一般**の**リソースファイル**から読み込んで再起動すれば……
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3197856/9de981cf-1e9b-4d81-6206-18501bd078db.png)
ちゃんと表示されるようになった！

ということで一件落着。ここまで長かった。

# まとめ
ということで、たかがフォント変更のためにこれだけ奮闘したことをダラダラと書いているだけだと、**FontForgeのUIのフォントを変える方法がわからないと嘆く迷える子羊の皆様にとってあまりにも実用性に欠ける**(まぁこれで困る人間は本当にひとつまみ程度かそれ以下しか居ないだろうが)と思うので、手順だけをまとめておく。
1. **ファイル>Appearance Editor...** を開く
![手順1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3197856/6e0d08e1-ac19-2b34-6b9c-041a018b1265.png)
![手順2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3197856/76438dce-9a50-e31d-2e16-8ac393b6922e.png)
1. **Save As...** をクリック。出てくるウィンドウで**保存**をクリック。
![手順3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3197856/8420b01f-abc5-5dc8-b353-b4b93de2973f.png)
1. 出力したファイルをテキストエディタ(メモ帳など)で開く。(デフォルトだと**ドキュメント**に出力されているはず。)
1. **fontforge.FontView.Font: 400 12pt system-ui,Deja Vu Sans,Calibri**の**12pt**以降を任意のフォント名に変えて保存。
例: fontforge.FontView.Font: 400 12pt Noto Sans CJK JP Regular
このとき、別名で保存しておくとデフォルトに戻したくなったときに戻せるので便利だと思う。
1. 保存したファイルをFontForgeに読み込ませるため、**ファイル>環境設定**をクリック。
![手順1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3197856/6e0d08e1-ac19-2b34-6b9c-041a018b1265.png)
![手順4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3197856/c717aea2-da9f-985f-06bf-c740cfe8ba06.png)
1. **一般>リソースファイル**の**…**をクリック、さっき保存したファイルを選択する。
![手順5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3197856/1e412068-86b6-789d-dc59-74edb79301c3.png)
1. FontForgeを一度閉じて、再起動。これで変わっているはず。

同じ方法を使えば、FontForgeのUIのフォントまるごとすべて変えてしまうという事もできるだろう。変更方法さえわかってしまえば微調整とかも可能なので、Noto Sans CJK JP Regular以外のフォントに変更してみて、気に入ったものがあればそれを採用しようと思う。

# ところで、なにか忘れてない？
あれ？**ディセンダーが食い込む**問題を解決してなくね？ と思ったそこのあなた。
実はラベルの表示フォントを変えたときに解決……とまではいかないが、かなりマシになっている。
上がフォント変更前、下がフォント変更後の画像である。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3197856/96eedc8c-e17e-4cf8-b481-65915826480b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3197856/5c10c926-bd26-0a1a-8dd6-67a38402ca52.png)
まだ若干食い込んでいる感は否めないが、それでもフォント変更前よりはマシになっているので、とりあえず現状維持。これが解決できそうなフォントを見つけるなり、2020版のデフォルト設定のフォント名に変えてみるなりしてみようと思う。