PhotoLifeBlog

美しいものをみつけられるカメラマンを目指して

PhotoLifeBlog

写真と共に過ごす

ブラウザのフォント

f:id:to0mi1:20161102231729j:plain

ブラウザで表示されるフォントが不満

今週は、出来るだけ更新頑張ってみます。

最近は、様々なWebサイトでこだわりを持ってフォントが指定してあります。おかげでどのサイトもフォントの表示が綺麗。

私のこのブログのタイトルも「Quicksand」というフォントを使わせて貰っています。(テンプレートのデフォルトですが、気に入っています。)

日本語フォント

しかし、それは大抵の場合英字フォントに限ります。今はWebフォントが普及していて気軽に好きなフォントを指定することができますが、それはページ読み込みの際にフォントを読み込むという方式だったはず。
日本語は英字と比較して比べものにならないくらいの文字種がありますがから、Webフォントを使用するとWebページ全体が重くなって大変です。

そのため、日本語は標準でOSにインストールされているフォントを指定する事が多いと思います。

最近は、Windows環境向けには「游ゴシック」が指定されていることが多いと思います。
私のブログも例外ではなく、日本語は游ゴシックを指定しています。

なんとなく指定しているのでは?

皆英字には、こだわりを持って指定しているけど、日本語に関してはなんとなくOS標準だとこれが一番マシという理由で指定しているんではないかと思います。

ある程度PC関連の事に知識がある人は、好きなフォントをインストールしていてそれを使用して表示したいと考えている人も多いはず。

好きなフォントを指定したい

Firefoxには、指定したフォントでの表示を強制する設定項目がありますが、Chromeにはそういった設定は存在しません。
しかも、Firefoxにある指定したフォントでの強制は、Webサイトのデザインのため指定されたフォントまで強制することになるので制作者の意図するものとは大きくかけ離れた表示になってしまうことが想定されます。
私はそこまでの強制は望んでいませんので、特定のフォントのみを好きなフォントへ置き換えたいという思いがあります。

Stylish

ここからはChromeに限った話ですが、拡張機能(Firefoxで言えばプラグイン)を利用してそれを実現することが出来るのです。

それが「Stylish」という拡張機能

この拡張機能は、表示ページへCSSを適用することが出来ます。それを利用して特定のフォントをローカルへインストールしたフォントへ置き換えます。

Noto Sans CJK JP

私の最近のお気に入りフォントはトップ画像のフォント「Noto Sans CJK JP」です。 googleが開発したフォントらしく、綺麗でなおかつ多くの文字に対応しています。

ダウンロード元は、以下のURL

Google Noto Fonts

これをPCへインストールしているため、ページへ適用したいと思います。

設定方法

拡張機能Chromeへインストールしたら、あとはCSSにて設定します。

置き換えたいフォント

MS P ゴシックは昔からWindows標準のフォントです。メイリオは確かVistaあたりから載ってきたフォントだったと思います。
最後の游ゴシックは、最近の8あたりから載ってきたフォントでこの中では一番綺麗かと思います。

これらのフォントを一掃してすべてNoto Sans CJK JPへ置き換えます!!

Stylishの設定

ChromeにインストールしたStylishのオプションを開くと管理画面が新しいタブで開かれ、左側へ以下のようなメニューがあるはず。

f:id:to0mi1:20161102234920j:plain:w300

「新しいスタイルの作成」ボタンから設定をおこないます。

CSS

以下の画面に切り替わると思うので、そこのテキストフィールドに設定するCSSを入力していきます。

f:id:to0mi1:20161102235355j:plain:w500

私は以下のCSSを設定しました。

@font-face {
font-family: "MS PGothic"; 
src: local("Noto Sans CJK JP Light"); 
}

@font-face {
font-family: "メイリオ"; 
src: local("Noto Sans CJK JP Light"); 
}

@font-face {
font-family: "YuGothic"; 
src: local("Noto Sans CJK JP Light"); 
}

@font-face {
font-family: "Yu Gothic"; 
src: local("Noto Sans CJK JP Light"); 
}

@font-face {
font-family: "游ゴシック体"; 
src: local("Noto Sans CJK JP Light"); 
}

@font-face {
font-family: "游ゴシック"; 
src: local("Noto Sans CJK JP Light"); 
}

これだけでOKです。

内容は、font-familyへ置き換えたい対象のフォントを指定。src:localへは置き換えるフォントを指定。

サイトが見違えるように

嫌なフォントが指定されている代表格「Yahoo! Japan」MS P ゴシックがしっかりと指定してあります。

f:id:to0mi1:20161103000019j:plain:w300

これが私の大好きなNotoフォントへ!

f:id:to0mi1:20161103000157j:plain:w300

素晴らしいですね。

文字は大切

たかがフォントですが、やはり人それぞれ好きなフォントがあって、見やすいフォントがあると思います。

ブラウザは一番使うソフトなので、好きで見やすい綺麗なフォントでWebサイトを見たいですね。