ChromeでWebサイトの表示フォントを強制変更する

Twitterの入力欄のフォントがメイリオなおかげで、ツイートの入力時に「“”」の左右が識別しづらかった。
んで、Chromeの拡張機能で強制的に表示フォントを変更した。
Twitterのみならず、ほぼ全てのWebサイトで表示フォントの変更が反映されるが、読みやすいフォントを選んでいれば問題あるまい。

フォントを準備
1. フォントのダウンロードとインストール
Stylusの設定
1. 拡張機能をChromeに追加
2. フォントの変更を設定
参考

フォントを準備

使用するフォントを準備する。
既にインストールされているフォントを使用する場合は、この手順を省略してよい。

フォントのダウンロードとインストール

使用するフォントは「お好み」で構わないが、あまりにも読みづらいフォントを指定すると書いてある内容が頭に入ってこないなどの弊害が出るため、後悔しないフォントを選ぶこと。

今回は、Noto Sans JPを使用するので、Google Fontsからダウンロードする。

Noto Sans Japanese - Google Fonts

Noto is a global font collection for writing in all modern and ancient languages. Noto Sans JP is an unmodulated (“sans ...

ついでに絵文字用のフォントもダウンロードしておく。

Noto Color Emoji - Google Fonts

Noto Color Emoji is an open source font that has you covered for all your emoji needs, including support for the latest ...

ダウンロードしたファイルを解凍し、フォントをインストールしておく。

Stylusの設定

拡張機能をChromeに追加

Chrome ウェブストアから拡張機能「Stylus」をChromeに追加する。

Stylus

Stylus でウェブのデザインを変更しましょう。これは、ユーザースタイルを管理するツールです。Stylus を利用すると、多くの人気サイト向けのテーマやスキンを簡単にインストールできます。

フォントの変更を設定

拡張機能「Stylus」の設定に、以下のコードをコピペする。

/* コピペここから */
*, span, a, p {
font-size: unset;
}
* {
/*font-family: serif; /* フォントの種類指定 */
font-family: 'Noto Sans JP', 'Noto Color Emoji', sans-serif; /* フォント指定 */
}

button, input, select, textarea {
/*font-family : inherit;*/
/*font-family: serif; /* フォントの種類指定 */
font-family: 'Noto Sans JP', 'Noto Color Emoji', sans-serif; /* フォント指定 */
font-size : 100%;
}
/* コピペここまで */

サイトによってはフォントの変更で表示が不正になるので、必要に応じて除外の設定を登録すること。