すりゴマ・ドットコム

No Google, No Life. ITに絡むことすべてを話題にします。あ、自転車と読書についてもたまにね。

今どきダサいフォントでWEB見てる人いないよね?Chromeでフォント表示をカスタマイズする方法

すりゴマです。
今日もいい感じにすり潰していきますね。

http://www.flickr.com/photos/76908909@N00/2840245615
photo by Josh Self

さて、日頃ブラウジングしていると、こんな悩みを抱えている人、多いんじゃないでしょうか?

サイト側でMS Pゴシック等のク○なフォントを指定しているサイトに遭遇し、「大島の生写真あげるよ!」と言われもらった写真がAKBの大島優子ではなく森三中の大島だったときくらいのショックを受けて立ち直れない。

とか、

やっぱりWEBは好きなフォントで見たいよ。

とか。


まぁ前者はすりゴマくらいかと思いますがw、今日は上記のような悩みを解決するために、Chromeで好きなフォントを指定してバッチリ表示する方法をご紹介したいと思います!
(・∀・)

「Custom.css」で解決・・・しない!

MS Pゴシックとか使ってんの? え?フォントに?

とかダジャレ言ってる場合ではありません。


さてChromeでのフォントのカスタマイズは、設定から、「詳細設定」→「フォントをカスタマイズ」で、好きなフォントを指定すればある程度は解決します。

f:id:ground_sesame:20140301132607p:plain

しかし先ほどの例のように、WEBサイト側がcssで、非常にイケてないフォント(MS ゴシックとか)を指定している場合は、そのイケてないフォントで表示されてしまいます。
orz

こうしたサイトでフォントを指定して表示するための解決方法はいくつかありますが、その中の一つに、Chromeの「Custom.css」を編集する方法は、これまで広く知られた方法でしたね。
(・∀・)


しかし!

先日Chromeがアップデート(バージョン 33.0.1750.117)から、ななななななんと、Custom.cssが使えなくなりました。。
OTL

すりゴマはこれまでCustom.cssを編集して自分の好きなフォント指定をしてきたので、突然、「Yah○o!」や「W○B日経」などが「ヒラギノ」で表示されたとき、しばらく何が起きたのか原因も分からず混乱してしまいました。
(´・ω・`)


ググる先生に色々聞きまわったところ、某ちゃんねるで「Custom.cssの廃止」が話題になっていて、原因がChromeだと判明。

ということで、別な手段を探します!

Chrome拡張でフォントをカスタマイズ!

他にも同じことが出来るChrome拡張機能はいくつかありますが、すりゴマは使いやすそうなこれにしました。

Stylist - Chrome Web Store

本来はWEBの見え方全般をカスタマイズするための拡張ですが、フォント指定のためだけに使っても、もちろん問題ありません。
(*´∀`*)

Stylistでのフォント指定方法

Stylistをインストールしたら、

chrome://extensions/

から、Stylistのオプションを開きます。


・・・が、すりゴマの場合、オプション画面がうまく開いてくれませんでした。
orz


ブラウザを更新して、ようやくオプション設定画面が開きます。
f:id:ground_sesame:20140301125055p:plain

Stylesタブを開き、「Add New Style」をクリックして新しいスタイルを追加します。
f:id:ground_sesame:20140301125107p:plain

スタイル名を入力して、cssでフォントを設定して「Save」でOK!

So easy!

【注意】
初めから入っている2つのスタイルは削除(delete)するか無効(disable)してください。

すりゴマのお気に入りフォント

さて使用するフォントですが、すりゴマは、Windowsの英字フォント「Segoe UI」と日本語フォント「Rounded-L M+ 1c」の組み合わせが、英字と日本語文字の違和感がなく、お気に入りです。
(*´∀`*)

すりゴマのcssはこんな感じになります。

@charset "UTF-8";

* {
  font-family: "Segoe UI", "Rounded-L M+ 1c" !important;
}

font-familyの後のフォント名を、自分の好きなフォント名にすれば、

サイト側に左右されない、お気に入りのフォントで表示されるChromeの出来上がり!

\(^o^)/

【追記】
最近流行りの「アイコンフォント」が「豆腐」に化けてしまう現象を回避するには、!important を削除してください。

好きなサイトだけフォントを変えることもできる

「Stylist」では先述のように、全てのサイトに一括で反映させることも出来ますが、ドメインやサイトごとにStyleを設定することも出来ます。

例えば、Yahooだけ「ヒラギノ」で表示させたい!という場合は、
f:id:ground_sesame:20140301133229p:plain

こんな感じですね。


すりゴマは、xda等のよく訪問する英語のみのサイトで、オリジナルのフォントを表示させるために使っています。

Windowsの人は絶対にやった方がいい!

Macの場合は、ヒラギノ等のClearTypeのフォントがデフォルトで入っているので、汚フォントによる失明等のリスクは少ないかもしれません。
(しつこいですが失明しませんw)

しかぁ〜し!

WindowsXP等の古いWindowsの場合は、悪名高い「ギザギザMS Pゴシック」で目がやられる恐れがありますので、絶対にフォント指定をした方がいいと思います!!

「メイリオ」は横幅が広くてレイアウトが崩れる問題もありますので、「Meiryo UI」なんかがいいかもですね。
(・∀・)


ということで、Chromeでのフォント設定の方法、いかがだったでしょうか?

この記事を読んで「フォント汚染」の被害者が少しでも減れば嬉しいです。
(*´∀`*)


今日も最後までお読みいただき、ありがとうございました。

お時間がよろしければ、他の記事も読んでいってください。
ヽ(´ー`)ノ

by カエレバ