Windowsでも美しいフォントで読みたい

前置き

一般にWindowsのフォントレンダリングは汚いといわれています。その原因はいろいろ言われていますが、一番よく言われているのは標準で使われているフォントが汚いことです。例えばMSゴシックはフォントサイズが12pt以下だとアンチエイリアスの効いたアウトライン描画ではなく、ビットマップフォントで表示されてしまうので、特にHiDPI環境での視認性がとても悪くなります。そこで自分できれいなフォントをインストールして使うわけですが、後述するように一筋縄ではいきません。そこでこの記事ではブラウザで自分好みのフォントで読む方法を紹介します。
 ブラウザの設定でフォントは変更することができますが、font-familyが未指定かsans-serif等、総称でしか指定していない場合のみ反映されます。しかし、

font-family:"MS Pゴシック",sans-serif;

と指定されたサイトだとWindowsならブラウザのフォントの設定に関わらずMS Pゴシックで表示されてしまいます。MS PゴシックWindowsから削除することで指定を回避することもできますが、既存のアプリの表示がおかしくなるなどの互換性の問題があります。また、Firefoxならば

ウェブページが指定したフォントを優先する

のチェックを外せばfont-familyの設定を無視してブラウザに設定したフォントで表示させることができますが、アイコンフォントが文字列に置き換わってしまうという副作用があります。そこで、ChromeFirefox両方に対応した拡張機能Stylusを用いて気に入らないフォントのみを好みのフォントに置き換えることにします。

環境

フォントをインストールする

Stylusでフォントを置き換える前にフォントをインストールします。ここではゴシック体と明朝体として日本語、韓国語、中国語に対応したNoto Sans CJK JP, Noto Serif CJK JP、等幅フォントとしてPlemolJPをインストールし、MSゴシックなどをこれらに置き換えることにします。

Noto Sans CJK JPはここから、Noto Serif CJK JPはここから、PlemolJPはここからダウンロードできます。*1ダウンロードしたら解凍して.otfファイルを右クリック->すべてのユーザーにインストールを選択してインストールします。*2

Stylusでフォントを置き換える

@font-face { 
 font-family:'置き換えたいフォント'; 
 font-weight: normal;
 src: local('置き換え先のフォント');
}

font-weightで置き換えたいフォントを選びます。太字のフォントを置き換えるにはnormalに代わりboldを指定し、置き換え先のフォントをBoldフォントにします。MSゴシック、MSPゴシック、MS明朝、Yu Gothic UI、メイリオ*3を、なるべく太さや字体を変えずに上でインストールしたフォントに置き換えるスタイルシートは以下のようになります。

@font-face {
    font-family: "Meiryo";
    font-weight: normal;
    src: local("Noto Sans CJK JP");
}
@font-face {
    font-family: "Meiryo";
    font-weight: bold;
    src: local("Noto Sans CJK JP Bold");
}
@font-face {
    font-family: "メイリオ";
    font-weight: normal;
    src: local("Noto Sans CJK JP");
}
@font-face {
    font-family: "メイリオ";
    font-weight: bold;
    src: local("Noto Sans CJK JP Bold");
}
@font-face {
    font-family: "Meiryo UI";
    font-weight: normal;
    src: local("Noto Sans CJK JP");
}
@font-face {
    font-family: "Meiryo UI";
    font-weight: bold;
    src: local("Noto Sans CJK JP Bold");
}
@font-face {
    font-family: "MS PGothic";
    font-weight: normal;
    src: local("Noto Sans CJK JP");
}
@font-face {
    font-family: "MS Pゴシック";
    font-weight: normal;
    src: local("Noto Sans CJK JP");
}
@font-face {
    font-family: "MS ゴシック";
    src: local("Noto Sans CJK JP");
}
@font-face {
    font-family: "MS Pゴシック";
    font-weight: normal;
    src: local("Noto Sans CJK JP");
}
@font-face {
    font-family: "Yu Gothic UI";
    font-weight: normal;
    src: local("Noto Sans CJK JP");
}
@font-face {
    font-family: "Yu Gothic UI";
    font-weight: bold;
    src: local("Noto Sans CJK JP Bold");
}
@font-face {
    font-family: "游ゴシック";
    font-weight: normal;
    src: local("游ゴシック Medium");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: normal;
    src: local("Noto Sans CJK JP");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: bold;
    src: local("Noto Sans CJK JP Bold");
}
@font-face {
    font-family: "MS PMincho";
    font-weight: normal;
    src: local("Noto Serif CJK JP");
}
@font-face {
    font-family: "MS P明朝";
     font-weight: normal;
    src: local("Noto Serif CJK JP");
}
@font-face {
    font-family: "MS 明朝";
     font-weight: normal;
    src: local("Noto Serif CJK JP");
}
@font-face {
  font-family: "MS Gothic";
  src: local("PlemolJP");
}

どのようにしてフォントを置き換えているのか

@font-face は独自フォントを指定するためのもので、font-familyでフォントの名前、src:でフォントの場所を指定します。ここでは例えばsrc: local("Noto Sans CJK JP");と記述することでフォントの参照先をNoto Sans CJK JPの場所に上書きし、狙ったフォントのみを置き換えています。

*1:Noto Sans CJK JPは2021年12月29日現在、Google Fontsのサイトからダウンロードできなくなっていますが、GitHubには残っているのでそこからダウンロードします。

*2:Firefoxの場合はC:\Users\ユーザー名\AppData\Local\Microsoft\Windows\Fontsを参照してくれるので、右クリック->インストールで問題ありませんが、Chromeの場合はC:\Windows\Fontsのみ参照するためすべてのユーザーにインストールを選択する必要があります。

*3:メイリオをやたら好む人がいますが、私は横幅が広く、線分の太さに差をつけすぎていて嫌いです。そもそもメイリオというフォントはMSゴシックのようなビットマップフォントを避けながら、低DPI環境でも視認性を保つために開発された節があるので、現代の高画素密度なディスプレイには似合いません。