Google Chromeで汚いフォントを別のフォントに置き換える

今回はchromeの拡張機能「Stylish」・「Stylist」を使ってフォントを置き換える方法をご紹介。 "All site"にしてFont familyを指定するのではサイトが指定しているWebフォントが使えないから嫌だけど、わざわざサイト毎にフォントを指定するのはめんどくさい…という方に使えるテクニックです。

＊Firefoxでは、stylish等を使えば似たようなことができます。

フォントを置き換えるには

まずはchromeの拡張機能のStylistのページに飛びます。
次の文字列をコピーしてURL欄に貼り付けると一発です。

Stylist:「chrome-extension://pabfempgigicdjjlccdgnbmeggkbjdhd/options_page.html#style」

Stylish: 「chrome-extension://fjnbnpbmkenffdnngjfgmeleoegfcffe/edit.html」

Stylistを使用している場合は「style set」のAll siteにチェックを入れます。
コード記述欄に以下のように記述します。

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

太字のフォントも置き換えたい場合はfont-weightのnormalをboldに書き換えてください。（もしくは数値でも可）

Italic体の場合はfont-style: italic;を書き足してください。

書き換えの例

MS PゴシックをNoto sans CJK JP Regularに置き換え

@font-face { 
 font-family: 'MS Pゴシック';
 font-weight: normal;
 src: local('Noto sans CJK JP Regular');
 }

MS Pゴシックだけでなく、'ＭＳ Ｐゴシック'、'MS PGothic'の全部で3通りを登録しないと全てが置き換わらないです。
さらにBold体も置き換えたい場合は全部で6通りの登録が必要です。

MS Pゴシック絶対殺すマン専用カンニングペーパー（クリックで開閉）

@font-face { 
 font-family: 'MS Pゴシック';
 font-weight: normal;
 src: local(meiryo);
}
@font-face { 
 font-family: 'ＭＳ Ｐゴシック';
 font-weight: normal;
 src: local(meiryo);
}
@font-face { 
 font-family: 'MS PGothic';
 font-weight: normal;
 src: local(meiryo);
}

@font-face { 
 font-family: 'MS Pゴシック';
 font-weight: bold;
 src: local(meiryo);
}
@font-face { 
 font-family: 'ＭＳ Ｐゴシック';
 font-weight: bold;
 src: local(meiryo);
}
@font-face { 
 font-family: 'MS PGothic';
 font-weight: bold;
 src: local(meiryo);
}

メイリオの太字をNoto Sans CJK JP Mediumに置き換え

@font-face {
 font-family: 'メイリオ';
 font-weight: bold;
 src:local('Noto Sans CJK JP Medium');
}

スポンサーリンク

@Font-Faceとは何か

@Font-FaceはWebフォントを読み込む際に使うものです。
その中のフォントの読み込みの選択肢として、ユーザーのLocal環境からフォントを指定する方法が用意されています。
通常の使い方では、ローカルに指定したいフォントがインストールされていればそれを、されていなければURLからフォントを取得する、というように使われます。

今回はそれを逆手に取り、MS PゴシックというフォントはWebフォントであると認識させてフォントを上書きしています。