WebフォントのNoto Serifを使ってみる

Noto Serif JPがGoogle Fontsに追加されていたので、試してみました。

サンプルコード

Noto Serif JPのページにアクセスして、右上の「SELECT THIS FONT」をクリックします。

下部に表示される「Family Selected」をクリックします。

記載されているコードを追加すればOKです。

head

<link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP" rel="stylesheet">

CSS

font-family: 'Noto Serif JP', sans-serif;

Noto Serif JPのデモページ
　

デフォルトではregularの太さのみなので、ウェイトを追加してみます。
CUSTOMIZEタブをクリックして、追加したいウェイトを選択します。

今回は全てのウェイトを選択して表示を試してみますが、1つ1つのウェイトがかなり重いです。
実際に使う場合、多くても2～3種類程度にしておいた方がよさそうです。

head

<link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP:200,300,400,500,600,700,900" rel="stylesheet">

CSS

.w200 {
	font-weight: 200;
}
.w300 {
	font-weight: 300;
}
.w400 {
	font-weight: 400;
}
.w500 {
	font-weight: 500;
}
.w600 {
	font-weight: 600;
}
.w700 {
	font-weight: 700;
}
.w900 {
	font-weight: 900;
}

Noto Serif JPの太さ別のデモページ

Noto Serif JPの他にも、Noto Sans JPなどが追加されているようです。