さらばMS ゴシック／MS Pゴシック！ Windows版Google Chromeできれいなフォント表示を実現する

Windowsではいまだに使用されているMS ゴシックとMS Pゴシック。メイリオやConsolasといったClearTypeのフォントがリリースされて長らくたっても、いまだに標準フォントとして設定しているWebサイトが少なくありません（IT mediaとか）。

Firefoxの場合は、標準フォントを「メイリオ」に設定しておくとある程度勝手にフォントを置き換えてくれます。

一方、Google ChromeはCSSで具体的にフォント名が指定されている場合は、指定されたフォントを優先して適用するようです。そのため、律儀に「MS Pゴシック」とフォント名を指定してくれているWebサイトでは、残念ながらあのビットマップのフォントが表示されてしまうというわけです。

これらのフォントの使用場面が減るだけで、「Windowsはフォントの表示が汚い」といった誤解も減らせそうなのですが……。というわけで、せめてブラウザでは極力表示させないようにしてみたいと思います。

ユーザースタイルシートでフォントの設定を変更する

Google Chromeでは、ユーザーが閲覧中のWebページに任意のスタイルを指定することができる「ユーザースタイルシート」が利用できます。このユーザースタイルシートでフォントを指定することも可能です。

フォントの指定方法には、2つの方法があります。

1. 「!important」を使う

1つは「!important」で強制的にフォント指定を適用させる方法です。

p { font-family: "Meiryo" !important; }

みたいに書いておくと、p要素の文字にはすべてメイリオが適用されるようになります。しかし、MS Pゴシック以外のフォントもすべて書き換えられてしまいます。

MS Pゴシックと同じ文字幅に設定された「MeiryoKe_PGothic」というフォントを利用すれば、サイト自体が大きく崩れることはありませんが、やはりすべて同じフォントというのは味気ないですね。

何より、等幅フォントとプロポーショナルフォントをdivやspan要素で使い分けているWebサイトの場合は、classを調べて指定し直さないといけません。当然、classの値などWebサイトごとにそれぞれ異なるので、利用しているサイトすべてに対応しようなんて考えるとこれまた面倒です。

2. 「@font-face」を使う

Google Chromeのスタイルシートではもう1つ、「@font-face」を使用することでフォントを指定することもできます。

@font-faceはWebフォントを利用するときに本来？は使うようなのですが、実はローカルのフォントを指定することも可能です。特定のフォントとパソコンにインストールしている任意のフォントを置換させることができます。

つまり、MS ゴシックを別の等幅フォントに、MS Pゴシックを別のプロポーショナルフォントにそれぞれ@font-faceで指定してやれば、ほかのフォントに影響を与えることなく、この2つのフォントをWebページ上から消せるわけです。これだと目的をうまく達成できそうですね。

Google Chromeのユーザースタイルシートを開きます。
Windowsの場合は、下記のパスから取得できると思います。
~\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

@font-face {
  font-family: "ＭＳ Ｐゴシック"; /*置換したいフォントを指定*/
  src: local("Meiryo");
}

@font-face {
  font-family: "ＭＳ ゴシック";  /*置換したいフォントを指定*/
  src: local("MeiryoKe_Gothic"); /*新しく適用させたいフォントを指定*/
}

こんな感じで指定が可能です。編集後上書き保存すると、すぐにフォントが変更されます。再起動不要です。ちなみに、MeiryoKe_Gothicはメイリオから生成した等幅フォントです。作り方の詳細等は下記ページで解説されています。

XPでVista搭載フォント"メイリオ"を使う(&文字幅はMS Pゴシックと同じに)-MeiryoKe_PGothic | 8倍速対応

これだけでもかなり見栄えがましになるとは思うのですが、メイリオ系の英字フォントはちょっと残念なので、等幅フォントは「Consolas」とかにしたいですね。ちなみに、英字プロポーショナルフォントのおすすめは「Segoe UI」です。どちらもWindows 7ならはじめからインストールされているはず。

英字と日本語のフォントの使い分けについてですが、実は可能です。@font-faceでは、unicode-rangeという記述子で、適用させる範囲を指定することもできるようです。

@font-face {
  font-family: "ＭＳ Ｐゴシック";
  src: local("Segoe UI");
  unicode-range: U+0000-007F;
}

@font-face {
  font-family: "ＭＳ Ｐゴシック";
  src: local("Meiryo");
  unicode-range: U+0080-FFFF;
}

こんな感じですね。これでうまいことフォントを使い分けてくれるようになります。しゃれた英字フォントを使ってみるのもよいのではないでしょうか。

自分の設定内容

最後に、自分のCustom.cssの設定内容をさらしておきます。

@charset "UTF-8";

body {
  font-family: 'Segoe UI', 'Meiryo';
}


@font-face {
  font-family: "MS PGothic";
  src: local("Segoe UI");
  unicode-range: U+0000-007F;
}


@font-face {
  font-family: "MS PGothic";
  src: local("MeiryoKe_PGothic");
  unicode-range: U+0080-FFFF;
}

@font-face {
  font-family: "ＭＳ Ｐゴシック";
  src: local("Segoe UI");
  unicode-range: U+0000-007F;
}


@font-face {
  font-family: "ＭＳ Ｐゴシック";
  src: local("MeiryoKe_PGothic");
  unicode-range: U+0080-FFFF;
}

@font-face {
  font-family: "MS UI Gothic";
  src: local("Segoe UI");
  unicode-range: U+0000-007F;
}

@font-face {
  font-family: "MS UI Gothic";
  src: local("Meiryo UI");
  unicode-range: U+0080-FFFF;
}

@font-face {
  font-family: "ＭＳ ゴシック";
  src: local("Consolas");
  unicode-range: U+0000-007F;
}


@font-face {
  font-family: "ＭＳ ゴシック";
  src: local("MeiryoKe_Gothic");
  unicode-range: U+0080-FFFF;
}


@font-face {
  font-family: "MS Gothic";
  src: local("Consolas");
  unicode-range: U+0000-007F;
}


@font-face {
  font-family: "MS Gothic";
  src: local("MeiryoKe_Gothic");
  unicode-range: U+0080-FFFF;
}

以上！
Windowsのフォント表示は決してだめではありませんよ。初期設定のフォントがちょっとだめなだけなんです。