macOS CatalinaでCSSフォントが明朝体で見にくくなったときの対処法

macOS Catalinaとは

2019年10月8日にリリースされた最新のmacOS。セキュリティが強化され、新機能もいくつか追加されたためアップデートしている人が多いが、Webサイト閲覧時にCSSフォントが明朝体で見にくくなってしまうという問題が起きている。

例えばFeedlyの場合は左図のように明朝体となってしまう。しかし後述の対処法でフォントを変えれば右図のように見やすいフォントに変更できる。
macOS CatalinaでCSSフォントが明朝体で見にくくなったときの対処法

CSSのフォント指定について

基本的にWebサイトではCSSのfont-familyでどのようなフォントでテキストを表示するか指定するのだが、macOS Catalinaではヒラギノ角ゴPro/ProNというフォントがなくなったため、これらを指定していたWebサイトでは代替で明朝体のフォントが表示されるようになることがある。

ユーザースタイルシート

この問題はユーザースタイルシートでfont-familyを上書きすることで解消できる。

まずStylusというChrome拡張機能をインストールする。

インストールしたらfont-familyを上書きするWebサイトを開き、ブラウザ上部にStylusのアイコンが表示されるのでクリックして「次のスタイルを書く」のURLをクリックする。
StylusというChrome拡張機能をインストールしてfont-familyを指定

あとは下記のCSSのコードを貼り付けて、適用先をドメイン上のURLに変更してドメインのみを記載して保存すれば、該当するドメイン上のWebサイトではフォントが明朝体で表示されず見やすくなる。

* {
  font-family: -apple-system,BlinkMacSystemFont !important;
}

CSSのコードを貼り付けて、適用先をドメイン上のURLに変更してドメインのみを記載して保存

macOS CatalinaでCSSフォントが明朝体で見にくくなったときの対処法