Google Fontsの「Noto Serif Japanese(日本語Webフォント)」の設定方法あれこれ:その2

前記事が長くなったので2ページに分けました。「その1」の続きです。

ほんでもって読み込んだ書体

下記がGoogleが提供してる日本語書体です。ゴシック体の『Noto Sans CJK JP』と明朝体の『Noto Serif Japanese』。


『Noto Serif Japanese』

前回「その1」で準備した書体を当てはめて並べてみました。微妙な違いを見比べてみてください。

デザインのメモ帳

書体:Noto Serif Japanese Black(font-weight: 900)

デザインのメモ帳

書体:Noto Serif Japanese Blod(font-weight: 700)

デザインのメモ帳

書体:Noto Serif Japanese SemiBold(font-weight: 600)

デザインのメモ帳

書体:Noto Serif Japanese Medium(font-weight: 500)

デザインのメモ帳

書体:Noto Serif Japanese Regular(font-weight: 400)

デザインのメモ帳

書体:Noto Serif Japanese Light(font-weight: 300)

デザインのメモ帳

書体:Noto Serif Japanese ExtraLight(font-weight: 200)


CSS 例

[ NotoSerifCJKjp-Black ]の場合

上記の明朝体には.eotのデータがありません。下記と書式が少し違います。後は対象になるセレクタにfont-familyとfont-weightを設定すればいい。

font-family: ‘Noto Serif Japanese’;
font-weight: 900;


『Noto Sans CJK』

前回「その1」で準備した書体を当てはめて並べてみました。微妙な違いを見比べてみてください。

デザインのメモ帳

書体:Noto Sans CJK JP Black(font-weight: 900)

デザインのメモ帳

書体:Noto Sans CJK JP Blod(font-weight: 700)

デザインのメモ帳

書体:Noto Sans CJK JP Medium(font-weight: 500)

デザインのメモ帳

書体:Noto Sans CJK JP Regular(font-weight: 400)

デザインのメモ帳

書体:Noto Sans CJK JP DimeLight(font-weight: 300)

デザインのメモ帳

書体:Noto Sans CJK JP Light(font-weight: 200)

デザインのメモ帳

書体:Noto Sans CJK JP Light(font-weight: 100)


CSS 例

[ NotoSansCJKjp-Black ]の場合

上記の明朝体には.woff2のデータがありません。後は対象になるセレクタにfont-familyとfont-weightを設定すればいい。

font-family: ‘NotoSansCJKjp’;
font-weight: 900;

関連記事