スキップしてメイン コンテンツに移動

Webサイトの嫌いなフォントをブラウザ側で置換する方法

たとえばGoogle系のページはフォント指定がArialなんだけど、
こいつはHelveticaの劣化コピーなので汚いし
日本語フォントとは高さも太さも違うせいでガタガタに表示される。

こういうのをどうにかしたい。
ほかRobotoとかMeiryoとかSegoeUIとかを指定してるサイトも個人的にはあんま好きじゃなくて、まとめて置換できる方法があるので使っている。



置き換え方法(Chromeを想定)
  • ユーザースタイルシートを設定できる拡張機能を入れる。たとえばStylish こいつは閲覧情報収集野郎&機能超絶劣化したのでStylusに乗り換え推奨
  • すべてのサイトに適用するスタイルを作成する。内容は以下

@font-face { font-family: "Arial"; font-weight: normal; src: local('ヒラギノ角ゴ Pro W3'); } @font-face { font-family: "Arial"; font-weight: bold; src: local('ヒラギノ角ゴ Pro W6'); } @font-face { font-family: "メイリオ"; font-weight: normal; src: local('ヒラギノ角ゴ Pro W3'); } @font-face { font-family: "メイリオ"; font-weight: bold; src: local('ヒラギノ角ゴ Pro W6'); } @font-face { font-family: "Meiryo"; font-weight: normal; src: local('ヒラギノ角ゴ Pro W3'); } @font-face { font-family: "Meiryo"; font-weight: bold; src: local('ヒラギノ角ゴ Pro W6'); }

こんな感じで、消したいフォントの数だけ指定すれば全部置換される。

注意点として、置換先であるヒラギノフォントは「すべてのユーザーに対してインストール」されていないとダメです。理由はわからん。

あとChromeの仕様変更とかでダメになる可能性はある。昔だとDirectWrite関連でOpenType全滅したりしたので、そんなことが今後あるかも。とりあえずver.101の時点では動いてる。

 

コメント