Googleが作ったフォント「Noto Sans Japanese」をウェブフォントとして使う手順

ウェブサイトで好みのフォントを使うことができる「Webフォント」という仕組みがありまして、以前は読み込みに時間がかかってたんですが、最近はサクッと表示されることが多く、かなり使いやすくなりました。

Googleが提供している「Noto Sans Japanese」というフォントが読みやすいなと思っているので、実装方法をご紹介します。

Noto Sans Japaneseをウェブサイトで使いたい時の手順

それではNoto Sans Japaneseをウェブサイトで使う方法について順番に解説していきます。

まずは、Noto Sans JapaneseをWebフォントとして使えるように下準備をします。

下記のコードをheadタグ内のどこかに書き込んでください。

<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/notosansjapanese.css">

WordPressを使ってる方であればheader.phpを開いて、headタグの終了タグ間際くらいに書き込むと良いと思います。

次にcssのファイルを開いて、font-familyをNoto Sans Japaneseに指定しましょう。

ウェブサイトにある全てのテキストのフォントがNoto Sans Japaneseになって問題がなければ、bodyに書き加えます。

body {
  font-family: "Noto Sans Japanese", sans-serif;
}

Noto Sans Japaneseが表示されない場合の保険のフォントはお好きなものを入れてください。

「見出しだけ」とか「文章だけ」とか、特定の場所だけ使っても良いと思います。例えば記事内の大見出しに使う場合はこんな感じです。

.entry-content h2 {
  font-family: "Noto Sans Japanese", sans-serif;
}

Noto Sans Japaneseは７段階の太さを指定することができます。

font-weight:bold;のように指定しても良いのですが、下記のように数字を指定することで太さを調整できますので、好みの太さのものをお使いください。

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 700;
font-weight: 900;

実際の太さのサンプルがこちら。フォトショで作ったものではありますが、ウェブサイトで表示されるテキストとほぼ同じなので参考になると思います。
Noto Sans Japaneseのフォントの太さ比較

僕のおすすめフォント3選の動画の中で、「動画の上にフォントを載せたサンプル」がありますので、動画にNoto Sans Japaneseが載っかった時にどう見えるのか確認したい方はこちらをどうぞ。

最近作ったサイトで使ったら見栄えがよくて、今度は自分のサイトでも使おうかなと思ってます。

ちなみに、「游ゴシック」も可愛すぎず使いやすいですよ。