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 ]の場合

@font-face {
font-family: ‘Noto Serif Japanese’;
font-style: normal;
font-weight: 900;
src: url(“fonts/NotoSerifCJKjp-Black.woff2”) format(‘woff2’),
url(“fonts/NotoSerifCJKjp-Black.woff”) format(‘woff’),
url(“fonts/NotoSerifCJKjp-Black.ttf”) format(‘truetype’),
url(“fonts/NotoSerifCJKjp-Black.otf”) format(‘opentype’);
}

上記の明朝体には.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 ]の場合

@font-face {<br>
font-family: 'NotoSansCJKjp';<br>
font-style: normal;<br>
font-weight: 900;<br>
src: url("fonts/NotoSansCJKjp-Black.eot");<br>
src: local('Noto Sans CJK JP Black'),<br>
local('NotoSansCJKjp-Black'),<br>
url("fonts/NotoSansCJKjp-Black.woff") format('woff'),<br>
url("fonts/NotoSansCJKjp-Black.ttf") format('truetype'),<br>
url("fonts/NotoSansCJKjp-Black.otf") format('opentype');<br>
}

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

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

関連記事