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

公開日: 

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

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

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


『Noto Serif Japanese』

デザインのメモ帳

書体: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』

デザインのメモ帳

書体: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 {
font-family: ‘NotoSansCJKjp’;
font-style: normal;
font-weight: 900;
src: url(“fonts/NotoSansCJKjp-Black.eot”);
src: local(‘Noto Sans CJK JP Black’),
local(‘NotoSansCJKjp-Black’),
url(“fonts/NotoSansCJKjp-Black.woff”) format(‘woff’),
url(“fonts/NotoSansCJKjp-Black.ttf”) format(‘truetype’),
url(“fonts/NotoSansCJKjp-Black.otf”) format(‘opentype’);
}

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

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

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

PAGE TOP ↑