JekyllでGoogle Fontsを利用する
背景
MacやiPhoneにはヒラギノフォントやhelveticaが入っているのでWebページが綺麗に表示されていいのですが,Windowsにはこれらのフォントは入っていないので違うものに置き換わってしまいます.またブラウザの設定によっても置き換わってしまうことがあります.
これを解決するために,OSやブラウザに依存しないwebフォントを利用することにしました.一番良さそうなものを調べたところ,google fontsのオープンソースの一部として提供されているGoogle Fonts + Japanese Early Accessの日本語フォントが綺麗で良さそうだったので利用することにしました.
方法
今回導入したのがNoto Sans Japaneseというフォントだったのでこれを例に説明します.Google Fonts + Japanese Early Accessにhtmlとcssのサンプルがあるので,これ見て適当なものを選べばいいと思います.
_layout/default.html
のヘッダ(<head>
と</head>
の間)に以下を追記します.
<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />
style.scss
の好きな要素の設定でfont-family: "Noto Sans Japanese"
を指定する.例えばp要素(本文)のフォントを変更したかったら,
p {
font-size: 17px;
font-weight: 900;
}
のように書きます.font-weight
というのは文字の太さでNoto Sans Japaneseでは以下の7種類に対応しています.太さは好みで適宜調整して下さい.