ブログのデザインにこだわりがある人は必見！「Google Fonts + 日本語」を使ってサイトのデザインをいいかんじに変更してみました！

Web / Tech

お気付きになられた方、いらっしゃるでしょうか。

実は10月26日にフォントをこっそりGoogle Fontsで提供されているものに変更して、見た目のデザインをほんの少し変更してみました！

「Google Fonts + 日本語」で変更したのは2つ

  • ブログ名を「ニコモジ」
  • 本文のテキストを「Noto Sans Japanese」

9種類のフォントが用意されていてたので、自分のパソコンにブログのHTMLをダウンロードして確認しながら「どのフォントにしようかなー」と選んでます。

思っていたより「ニコモジ」のハマり具合がよく、本当はロゴを作ろうかと思っていたぐらいですが、当分はこれでいいかなと思えるぐらいでした。

提供されているフォントは9種類

  • M+ 1p
  • Rounded M+ 1c
  • はんなり明朝
  • こころ明朝
  • さわらび明朝
  • さわらびゴシック
  • ニクキュウ
  • ニコモジ
  • Noto Sans Japanese

M+ 1p

日常的に使うための飽きのこない、それでいてちょっと気になるデザイン。

Rounded M+ 1c

明るく伸びやかなデザインを心がけた。

はんなり明朝

明朝体は墨溜まりを意識してデザインしています。

こころ明朝

少しほっそりとした、角丸な明朝体です。まろやかで、軽い感じがする文字です。

さわらび明朝

本文用のフォントとして使いやすくなるようにイメージしています。

さわらびゴシック

本文用のフォントとして使いやすくなるようにイメージしています。

ニクキュウ

モリっとして、ツヤのあるカタカナフォントです。

ニコモジ

すこしでもデザインのてだすけになれればさいわいです。

Noto Sans Japanese

Noto helps to make the web more beautiful across platforms for all languages.

「ひらがなのみ」「カタカナのみ」のフォントなどあるので、使いどころが限られるものもありますが、CSSだけでフォントが変えられるのは便利ですね！

それぞれのフォントのキャプチャを載せてみましたが、良さそうなフォントなどありましたか？変えてみたいフォントがあったら一度やってみるとよいですよー！

フォントの変更方法はどうやってやるのか？

googlefonts.github.io

まず、サイトにアクセスして、自分のブログに合いそうなフォントがあるか探してみてください。

右下にCSSの記述が見切れているものがあると思うので、そのCSSをコピペして使います！

試しに「Noto Sans Japanese」の記述を書いてみます

HTML

<! --
  Noto Sans Japaneseのcssを読み込み
  ダッシュボード > 設定 > 詳細設定 > headに要素を追加に追記
-->
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />

CSS

/*
  html、bodyタグにNoto Sans Japaneseを指定
  ダッシュボード > デザイン > カスタマイズ > デザインCSS
*/
html, body {
    font-family: 'Noto Sans Japanese;
}

手順として

  1. HTMLでgooglefontsで配信されているCSSを読み込み
  2. フォントを当てたい場所（今回は全体）に読み込んだCSSのフォントを適応

という感じです！

【いいポイント】違うOSでも同じフォントの見た目を表示することができる

個人的には最大にして最高のポイントだと思いますが、Windows、Mac、iOS、Android、などなど色々な環境で同じフォントを表示されるのはとっても気持ちがいいです！

これまでは端末やOSにすでに入っているフォントでやりくりして表示させる必要があったので、これですっきり解決できますねー

あと、他のブログとちょっとした差別化にもつながるので、ブランディングに気を使っている人も重宝するのではないでしょうか。

【イマイチなポイント】データの読み込みと表示の問題

日本語フォントはデータ量が多いので、データを読み込んで表示させるまでにどうしても時間がかかってしまいます。

なので、完全に表示されるまでに別のフォント（表示しているデバイスの標準フォント）が表示されたり、そもそも読み込みに時間がかかったりとするので、このへんがイマイチなポイントになってしまいます。

このブログも読み込みと表示速度を気にして、フォントを変更する前に可能な範囲で高速化をしてからフォントの変更をしてみました。

結果、ちょっと速くなったかな。。という感じです。

さいごに

Google側も試験的に提供という名目で提供しているので、速度やフォントの種類などはまだ改善の余地はありますが、全く使い物にならない訳ではないので、お試しでつかってみるのもいいかもしれませんよ。