ブラウザで好みのフォントで表示する方法

ネット上では様々なサイトがあり、設定されているCSSの定義“font-family”も様々である。よって訪問するサイトによってフォントが異なるのも理解できるが、ユーザーによっては好みのフォントで閲覧したいと思うのは自然なことであろう。

特に、“Windows”ではフォントが奇麗でないと云うこともあり、視認性に優れたフォントをインストールして、そのフォントで閲覧したくなる。

筆者は、“Google Noto Fonts”所謂“Noto Sans CJK JP”をローカル側にインストールして、ブラウザの表示に利用している。

以下のスクリーンショットは、“メイリオ”で表示した場合と“Noto Sans CJK JP”で表示した場合のスクリーンショットである。(Chrome)

“メイリオ”

“Noto Sans CJK JP”

では、その実現方法である。

実現には、“Stylish”に代表される、ユーザーCSSを定義できるブラウザの拡張機能を利用する。


↓ コピペ用 ↓
/* Noto Sans CJK JP */
@font-face { font-family: "MS Pゴシック"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "メイリオ"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "游ゴシック"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "meiryo"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "meiryo UI"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "MS PGothic"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "MS Gothic"; src: local('Noto Sans CJK JP'); }
@font-face { font-family: "MS UI Gothic"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "Yu Gothic"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "Yu Gothic UI"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "YuGothic M"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "Roboto"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "Arial"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "verdana"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "Helvetica"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "Hiragino Kaku Gothic Pro"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "Hiragino Sans"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "HiraKakuProN-W3"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "Lucida Grande"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "Lato"; src: local("Noto Sans CJK JP"); }

指定されたフォントを“Noto Sans CJK JP”に置き換えると云うCSSである。

これにより、閲覧されるサイトのフォントは“Noto Sans CJK JP”に変更されると云うワケだ。なお、変更できないサイトがあれば、ブラウザの [F12] キーの“デベロッパーツール”で定義されているフォントを調べて、同様に追加すればよい。

Windowsユーザーには是非おすすめしたい。
最終更新日: