※この記事は新しく更新されています。こちらをご覧ください。
こんにちは！
ワタクシはパソコンはMacとWindowsを両方使っているのですが、ブラウザはどちらもGoogle Chromeを使っています。ログインしておくと、お気に入りや設定が共通になるので、便利なんですよね。
しかし、MacとWindowsでは、同じGoogle Chromeとは思えないほど、字のきれいさが違います。もちろんMacが断然きれいです。
WindowsのChromeは字がかすれていて、見ていると疲れるのです。フォントを変えたりいろいろ試しましたが、全サイトできれいなフォントで見る方法が見つけられませんでした。
特にYahoo! Japanのトップページがなかなかきれいに表示してくれません。よく見るサイトなので、いっそうストレスがたまります。
そして最近、ついにWindowsのChromeでもきれいに表示ができる方法がわかりました。
こんな感じで表示されます。
Yahoo! Japanのトップページ
画像処理の関係でちょっとにじんでいますが、実際はにじみはありません。
Wikipedia（味噌汁のページ）
きれいなフォント表示でとても気持ちいいです。
この表示にするには、次の手順でできます。（これはWindowsパソコンのChromeの設定です。他のブラウザや端末では異なります）
１．前準備（フォントのダウンロードとインストール）
Google Noto Sansというフリーですがきれいなフォントをダウンロードします。次の手順でダウンロードしてください。
Google Noto Fontsのページに行き、検索に半角で「jp」と入力します。すると下に候補が２つ出てきます。（Noto Sans CJK JP＝ゴシック体、Noto Serif CJK JP＝明朝体）
最初に「Noto Sans CJK JP」をクリックして、下に出てきたダウンロードをクリックしてダウンロードします。
再び検索にjpを入力して、今度は「Noto Serif CJK JP」をダウンロードします。（右上の「DOWNLOAD ALL FONTS」をクリックすると、世界の言語をすべてダウンロードしますのでここはクリックしないでください）
ダウンロードが終わったら、２つ圧縮ファイルができているので、ファイルを右クリックして、「すべて展開」を左クリックして「次へ」をクリックして解凍してください。もう一つも同様です。
解凍されたフォルダには、次のようなフォントファイルが入ってきます。（Noto Sans CJK JPの場合）
★フォントのインストール方法
Chromeのバージョンが変わった影響で、従来の方法でインストールすると、フォントが認識しないこともあるようです。次の方法で行ってください。
インストールするフォントをすべて選択して右クリックし。「すべてのユーザーに 対してインストール」をクリックしてください。こうすることで、システムフォルダにフォントがコピーされ、認識するようになります。
（「インストール」だけでは認識しないようです。間違ってただのインストールをしてしまった場合、コントロールパネルのフォントから、そのフォントを削除し、改めて上記の方法でインストールしてください。）
Noto Serif CJK JPの方もインストールが終了したら、今度はChrome側の設定になります。
２．Google Chromeの設定
下のリンクから、Stylusという拡張機能を追加してください。これはページのスタイルを変更する拡張機能です。
追加されると、右上にSのマークが出ると思いますので、そのマークをクリックして「管理」を選択してください。
左のメニューから「新しいスタイルを作成」をクリックします。
右のエディタ部分に、次の文字をコピー＆ペーストしてください。（すべてのページでフォントをそろえるため、2/7にコードを追記しました）
（以下貼り付け）
body, h1, h2, h3, h4, h5, div, p {
font-family: 'Noto Sans CJK JP Regular' ;
font-weight: 450;
}
@font-face {
font-family: Meiryo;
src: local("Noto Sans CJK JP Regular");
}
@font-face {
font-family: メイリオ;
src: local("Noto Sans CJK JP Regular");
}
@font-face {
font-family: "M PLUS Rounded 1c";
src: local("Noto Sans CJK JP Regular");
}
@font-face {
font-family: "Rounded Mplus 1c";
src: local("Noto Sans CJK JP Regular");
}
@font-face {
font-family: "MS PGothic";
src: local("Noto Sans CJK JP Regular");
}
@font-face {
font-family: "ＭＳ Ｐゴシック";
src: local("Noto Sans CJK JP Regular");
}
@font-face {
font-family: "Yu Gothic";
src: local("Noto Sans CJK JP Regular");
}
@font-face {
font-family: 游ゴシック;
src: local("Noto Sans CJK JP Regular");
}
@font-face {
font-family: "Yu Gothic Medium";
src: local("Noto Sans CJK JP Regular");
}
@font-face {
font-family: "游ゴシック Medium";
src: local("Noto Sans CJK JP Regular");
}
/*---------------
serif
---------------*/
@font-face {
font-family: "MS PMincho";
src: local("Noto Serif CJK JP");
}
@font-face {
font-family: "ＭＳ Ｐ明朝";
src: local("Noto Serif CJK JP");
}
@font-face {
font-family: "Yu Mincho";
src: local("Noto Serif CJK JP");
}
@font-face {
font-family: 游明朝;
src: local("Noto Serif CJK JP");
}
（以上貼り付け）
この設定に名前を適当に付けて（今回は「フォント指定」という名前を付けています）、「保存」をクリックします。するとウェブページの文字が変わっていると思います。
※貼り付けた内容の「font-weight: 450;」の450の数字は、フォントの太さです。それぞれのディスプレイでベストな太さがあると思いますので、数値を50～450の間くらいで変更して保存し、自分のパソコンのベストな太さを見つけてください。
なお、500以上にすると、「太字フォント」になってしまいますので、450くらいまでにした方がバランスは良いと思います。
@font-faceとは、フォントを置き換える命令です。すべてNotoフォントに変えるように命令しています。
以上がWindowsのGoogle Chromeでフォントをきれいにする方法でした。ちょっと面倒かもしれませんが、努力した甲斐はあると思いますよ。（パソコンが複数台ある場合は、端末ごとにフォントのインストールと拡張機能の設定が必要です）
自分のブログもこんな感じに見えます。
※パソコンのディスプレイの性能差で、見え方に違いが出ます。よりきれいに見えるのは、フルHD～4Kの高性能ディスプレイが望ましいです。
ではまた！