背景

MacやiPhoneにはヒラギノフォントやhelveticaが入っているのでWebページが綺麗に表示されていいのですが,Windowsにはこれらのフォントは入っていないので違うものに置き換わってしまいます.またブラウザの設定によっても置き換わってしまうことがあります.

これを解決するために,OSやブラウザに依存しないwebフォントを利用することにしました.一番良さそうなものを調べたところ,google fontsのオープンソースの一部として提供されているGoogle Fonts + Japanese Early Accessの日本語フォントが綺麗で良さそうだったので利用することにしました.

方法

今回導入したのがNoto Sans Japaneseというフォントだったのでこれを例に説明します.Google Fonts + Japanese Early Accessにhtmlとcssのサンプルがあるので,これ見て適当なものを選べばいいと思います.

  1. _layout/default.htmlのヘッダ(<head></head>の間)に以下を追記します.
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />
  1. style.scssの好きな要素の設定でfont-family: "Noto Sans Japanese"を指定する.例えばp要素(本文)のフォントを変更したかったら,
p {
  font-size: 17px;
  font-weight: 900;
}

のように書きます.font-weightというのは文字の太さでNoto Sans Japaneseでは以下の7種類に対応しています.太さは好みで適宜調整して下さい.

綺麗なWebフォントを使えます(font-weight:100)

綺麗なWebフォントを使えます(font-weight:200)

綺麗なWebフォントを使えます(font-weight:300)

綺麗なWebフォントを使えます(font-weight:350)

綺麗なWebフォントを使えます(font-weight:500)

綺麗なWebフォントを使えます(font-weight:700)

綺麗なWebフォントを使えます(font-weight:900)