Windows10でウェブページの汚いフォントを置換える

4

はじめに

Windowsのフォント事情は、バージョンが上がるたびに改善されてきています。最近では、「Meiryo」「游ゴシック」「BIZ UDデジタル教科書体」「BIZ UDゴシック」など綺麗なフォントが標準でインストールされています。ですがウェブページでの表示は、ページ側の指定したフォントが使用されるため、古い作りのサイトではフォントが汚く表示されてしまいます。そこで、ウェブページのフォントを外部から無理やり上書きすることで、綺麗なフォントで表示するようにします。

具体的には、ブラウザの拡張機能を利用してユーザスタイルを指定します。ユーザスタイルの指定は、stylusなどの拡張機能で実現できます。

動作原理

@font-faceを利用して、一般的に使用されている既存の「フォント名」を「お気に入りのフォント名」で上書きしてします。下記のように置き換えます。

@font-face { 
  font-family: 'フォント名';
  src: local('お気に入りのフォント名');
}

置き換えは、半角と全角、大文字と小文字すべてを指定する必要があります。（例：「Meiryo」「meiryo」「メイリオ」は、別々に指定しないとサイトの指定方法と異なった場合に、漏れます）

※sans-serif, serifのブラウザ標準フォントは、置き換えできないため、ブラウザの設定画面から事前に指定しておきます

保険として、font-familyの上書きも記載してあります。ただし、body以外が漏れます。ですが、等幅フォント等サイトの指定に従った方が良い場合もあるため、bodyのみに留めてあります。

body {
  font-family: Verdana, 'BIZ UDPGothic' !important;
}

ユーザスタイル

font-family.uc.css/*! see https://www.bugbugnow.net/2020/02/font-family.uc.css.html */
@font-face { 
  font-family: Arial;
  src: local(Verdana);
}
@font-face { 
  font-family: arial;
  src: local(Verdana);
}
@font-face { 
  font-family: 'Helvetica';
  src: local(Verdana);
}
@font-face { 
  font-family: 'helvetica';
  src: local(Verdana);
}
@font-face { 
  font-family: 'HelveticaNeue';
  src: local(Verdana);
}
@font-face { 
  font-family: 'helveticaneue';
  src: local(Verdana);
}
@font-face { 
  font-family: 'Segoe UI';
  src: local(Verdana);
}
@font-face { 
  font-family: 'segoe ui';
  src: local(Verdana);
}
@font-face { 
  font-family: 'MS PGothic';
  src: local('BIZ UDGothic');
}
@font-face { 
  font-family: 'ms pgothic';
  src: local('BIZ UDGothic');
}
@font-face { 
  font-family: 'MS Pゴシック';
  src: local('BIZ UDGothic');
}
@font-face { 
  font-family: 'ms pゴシック';
  src: local('BIZ UDGothic');
}
@font-face { 
  font-family: 'ＭＳ Ｐゴシック';
  src: local('BIZ UDGothic');
}
@font-face { 
  font-family: 'MS Gothic';
  src: local('BIZ UDGothic');
}
@font-face { 
  font-family: 'ms gothic';
  src: local('BIZ UDGothic');
}
@font-face { 
  font-family: 'MS ゴシック';
  src: local('BIZ UDGothic');
}
@font-face { 
  font-family: 'ms ゴシック';
  src: local('BIZ UDGothic');
}
@font-face { 
  font-family: 'ＭＳ ゴシック';
  src: local('BIZ UDGothic');
}
@font-face { 
  font-family: 'Yu Gothic';
  src: local('BIZ UDGothic');
}
@font-face { 
  font-family: 'yu gothic';
  src: local('BIZ UDGothic');
}@font-face {
  font-family: '游ゴシック';
  src: local('BIZ UDGothic');
}
@font-face { 
  font-family: Meiryo;
  src: local('BIZ UDGothic');
}
@font-face { 
  font-family: meiryo;
  src: local('BIZ UDGothic');
}
@font-face { 
  font-family: 'メイリオ';
  src: local('BIZ UDGothic');
}
body {
  font-family: Verdana, 'BIZ UDGothic' !important;
}

※上記をすべてのページに適用する

備考

フォントの置き換え先

お置き換え先は、「Verdana」「BIZ UDGothic」です。理由は、筆者がWindows10標準フォントで一番読みやすいと考えたためです。（好みが違う場合は、別フォントに置き換えてください）

BIZ UDGothic の理由

「BIZ UDGothic」が等幅フォントを指定している理由は、「BIZ UDPGothic」が「」『』（）を半角文字のような文字幅で表示するためです。他の「游ゴシック」「Meiryo」などは、文字幅が大きいため、表示が他とずれやすくなります。気にならないのであれば、「BIZ UDPGothic」を指定し直せば、プロポーショナルフォントで表示できます。

補足

Firefox

Firefoxでは、標準の設定でウェブページが指定したフォントよりも標準フォントを優先する設定が準備されています。だたし、英字フォントと日本語フォントを同時に設定できないため、英語の表示幅が大きくなったりする問題があります。

※次の設定で標準フォントを優先できます。
　[三] > [オプション] > [一般] > [言語と外観] > [フォントと配色] > [詳細設定]
　[ウェブページが指定したフォントを優先する] のチェックを外す

特定ドメインの除外

stylusは、ユーザスタイルの特定ドメインの除外を設定できます。

設定方法は、目的のページを開いてブラウザアクションボタンをクリックします。今回のユーザスタイルであるfont-family.uc.cssが表示されるはずです。右端の「︙」ボタンをクリックすると「現在のドメインを除外」の項目が現れるため、チェックすれば特定ドメインのみ除外できます。

特定ドメインの除外

参考