閲覧用の固めで美しいゴシック体フォントをWindowsで用意する方法

4271 ワード
font Winfows Chrome フォント 源真ゴシック Chrome テキストリンク

経緯

Richtyを知ってから、フォント沼にハマり、エディタでは白源に落ち着き、使っていました。

【文字幅 半角3:全角5 も追加】Ricty を神フォントだと崇める僕が、フリーライセンスのプログラミングフォント「白源」を作った話 - Qiita
https://qiita.com/tawara_/items/374f3ca0a386fab8b305

Webブラウザ（Chrome)でも綺麗なフォントで見たいな。でも白源に設定したら全角スペースとか見えるのダサいなーと思って色々調べてみたところ・・・。
白源の元になったのは、源柔ゴシックだと分かり、これを入れるとなかなか良い！

源柔ゴシック (げんじゅうゴシック) | 自家製フォント工房
http://jikasei.me/font/genjyuu/

ただ、源柔ゴシック (ウェイト：Normal) だと、仕事中に眺めるには少し柔らかすぎ、もう少し硬いイメージのフォントがいいなぁと思っていると、源柔ゴシックも源真ゴシックを柔らかくした物という事が判明し、これだ！と思いました。

源真ゴシック (げんしんゴシック) | 自家製フォント工房
http://jikasei.me/font/genshin/

ただ、これを入れて Chrome に設定すると、Windowsがおバカなのか、アンチエイリアスが汚く文字が潰れたりします。

表示サンプル 源真ゴシック

そこで、見つけたのがこちら。

(M+とか)ブラウザ, VSCodeで表示が汚くなるフォントを救え！【シェルスクで自動化編】 - Qiita
https://qiita.com/AumyF/items/4f625ebd47603efaac7a

どうやら源真ゴシックは、同じ作者なのにヒンティング情報が良くないみたいで、ヒンティング情報を削除したフォントにすると綺麗になります。
結果はこちら。

表示サンプル 源真ゴシック ヒンティング削除版

あぁ素晴らしいですね・・・。

源真ゴシックからヒンティング情報を削除したフォントを生成する方法

WSLさえ入れていれば思ったほど面倒じゃなかったので、やってみてください。

１．源真ゴシックをダウンロードしてデスクトップにフォルダ作って解凍

源真ゴシック (げんしんゴシック) | 自家製フォント工房
http://jikasei.me/font/genshin/

２．WindowsにWSLをインストール

インストール方法はインターネット上で多数見つかると思うので、調べてみてください。

３．WSLに必要な物をインストール
WSL.
sudo apt install ttfautohint woff2
３．ヒンティング情報をフォントファイルから削除し再生成

下記スクリプトを作成し、先ほど解凍したデスクトップ内の源信ゴシックのフォルダに入れる。
※ スクリプトの改行コードは「LF」で保存してください。「CRLF」で保存すると実行時に「～^M」なんとかってエラーが出ます。

unhint.sh
#! /bin/bash
for file in $1*.ttf
do
    ttfautohint -dF " Unhinted" "$file" "unhinted-${file}"
    woff2_compress "unhinted-${file}"
done

あとは、WSL上で実行するだけ。
スクリプトと同じフォルダ内の全.ttfファイルから、ヒンティング情報が削除され、「unhinted-*」というフォントが生成されます。

WSL.
cd /mnt/c/Users/[ユーザ名]/Desktop/[源真フォントのフォルダ]/
./unhint.sh

これで、フォルダ内に、「unhinted-*」という名前のフォントが生成されているので、お好みのウェイトの物をインストールしてください。
個人的には、「unhinted-GenShinGothic-Normal.ttf」が良かったです。