Windows版Chromeのデフォルトフォントを変更する

デフォルトのメイリオやSegoe UIは、あまり好きではないので、別のフォントに変更する

やること

1. フォントを準備する
2. 設定を変更する
3. Stylusを使う
4. 「やっぱりNoto Sans」をインストールする

1. フォントを準備する

欧文フォントと日本語フォントを準備する

私のおすすめは、Inter と Noto Sans JP です

2. 設定を変更する

設定ページから、「デザイン」＞「フォントをカスタマイズ」の項目を開く

「標準フォント」「Sans Serifフォント」のフォントを「Inter Variable Text」にする

3. Stylusを使う

設定を変更するだけでも、多くのWebサイトでは効果が出るのですが、一部のサイトでは、直接メイリオを設定しているものもあるので、それらの対策をする

Chrome Web Storeで、Stylusという名前の拡張機能をインストールする

スタイルを新規作成し、以下のコードを貼り付ける（usernameの部分は自分のユーザー名に置き換える）

@font-face {
    font-family: "segoe ui variable display";
    src: local("inter variable text"),
         url("C:\Users\username\AppData\Local\Microsoft\Windows\Fonts\InterVariable.ttf");
    font-display: swap;
}
@font-face {
    font-family: "segoe ui";
    src: local("inter variable text"),
         url("C:\Users\username\AppData\Local\Microsoft\Windows\Fonts\InterVariable.ttf");
    font-display: swap;
}
@font-face {
    font-family: "system-ui";
    src: local("inter variable text"),
         url("C:\Users\username\AppData\Local\Microsoft\Windows\Fonts\InterVariable.ttf");
    font-display: swap;
}
@font-face {
    font-family: "meiryo";
    src: local("inter variable text"),
         url("C:\Users\username\AppData\Local\Microsoft\Windows\Fonts\InterVariable.ttf");
    font-display: swap;
}
@font-face {
    font-family: "arial";
    src: local("inter variable text"),
         url("C:\Users\username\AppData\Local\Microsoft\Windows\Fonts\InterVariable.ttf");
    font-display: swap;
}

4. 「やっぱりNoto Sans」をインストールする

Chrome Web Storeで、「やっぱりNoto Sans」という名前の拡張機能をインストールする

Stylusのコードはこの拡張機能を参考にしています

---

これでメイリオは消え、全体的にWebサイトが見やすくなったと思います