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

0

今回は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-weightnormalboldに書き換えてください。(もしくは数値でも可)

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 Pゴシック'、'MS PGothic'の全部で3通りを登録しないと全てが置き換わらないです。
さらにBold体も置き換えたい場合は全部で6通りの登録が必要です。

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

@font-face { 
 font-family: 'MS Pゴシック';
 font-weight: normal;
 src: local(meiryo);
}
@font-face { 
 font-family: 'MS Pゴシック';
 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: 'MS Pゴシック';
 font-weight: bold;
 src: local(meiryo);
}
@font-face { 
 font-family: 'MS PGothic';
 font-weight: bold;
 src: local(meiryo);
}

*メイリオ以外にしたい場合は'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フォントであると認識させてフォントを上書きしています。

ミルコン@管理人

しがない学生の WordPress デベロッパー。最近は WordPress テーマの作成や翻訳などやってます。フロントが好き。Twitter: @mirucons

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

スパム対策の為、日本語が含まれない投稿は無視されますのでご注意ください。