StylusでWebサイトのフォントを置き換え

in tools
  1. 環境
  2. 使いたいフォントをOSにインストール
  3. Stylus設定
  4. 各フォントの画像
  5. Chrome系で汚く表示されるフォントを改善する方法
  6. まとめ
  7. 追記

Stylus - Chrome ウェブストア

ユーザースタイルを管理でき、多くの人気サイト向けのテーマやスキンをインストールしたり、個人用のユーザースタイルを作成、編集したり、管理できる拡張機能。

環境

使いたいフォントをOSにインストール

Google Noto Fonts
Noto Sans CJK JPと、Noto Serif CJK JPを使う。

検索窓にjpを入力すれば、Noto Sans CJK JPとNoto Serif CJK JPが引っかかるので、1つづ選択してダウンロード。

GitHub - yuru7/HackGen
HackGen35 Consoleを使う。
Releasesページから、HackGenに含まれているのでHackGenをダウンロード。

解凍した後に、フォント右クリック > すべてのユーザーに対してインストール
これで、C:\Windows\Fontsにインストールできる。

右クリック > インストールだと、C:\Users\ユーザー名\AppData\Local\Microsoft\Windows\Fontsにインストールされて、この後の置き換えが動かない

また、ユーザーにインストールしてあるフォントを、さらにすべてのユーザーに対してインストールしてもこの後の置き換えで動かなかったので注意。
そのため、使いたいフォントがすでにユーザーにインストールされているときは一旦削除してから、すべてのユーザーに対してインストールし直す必要があります。

フォントのインストール場所を確認
Windows-i > 個人用設定 > フォント > フォントをクリック > フォントファイル

Stylus設定

Stylusクリック > 管理 > 新スタイルを作成

名前を入力してください
> @font-face.css

オプション
タブサイズ
4 > 2

コード1に下記をコピーして保存

設定ファイル

表示を確認

サイトに移動すれば、フォントが置き換わっているはずです。
変わっていないときは、PC再起動。

各フォントの画像

確認用に置いておきます。
一部分だけ固定幅指定のフォントで表示されていますが、気にしないように。

M PLUS Rounded 1cとRounded Mplus 1cは基本的に同じもののはず。

置き換えるフォント

フォント 画像
メイリオ
Rounded Mplus 1c
MS Pゴシック
游ゴシック
游ゴシック Medium
MS P明朝
游明朝
MS ゴシック

置き換え後のフォント

フォント 画像
Noto Sans CJK JP
Noto Serif CJK JP
HackGen35 Console

Chrome系で汚く表示されるフォントを改善する方法

原因の1つになっている、ヒンティングを削除したフォントを作成して使えばいい。ということですね。
作成するのがそれなりに面倒だったので、時間に余裕がある方向けですね。
大分前に作成して使っていたこともありますが、個人的にはNoto Sans CJK JPの方が見やすかったので使わなくなりました。

まとめ

Windows10とChrome系の組み合わせで無料の範囲なら、sans serifは、Noto Sans CJK JPが見やすいです。
というか、これ以外で見やすいフォントはなかなかないのでは。

明朝体のNoto Serif CJK JPは、一部の文字だけかすれていることがあるのでもう一歩という感じでしょうか。惜しい。
フォント置き換えるとき、Noto Serif CJK JPはRegularがいらないんだろう?

Noto Sans CJK JPに慣れてしまうと他は見づらいので、フォントを置き換えて表示することをおすすめします。

追記

2020-07-11

2020-07-16