Google日本語Webフォントの使い方

Googleが無料で提供している日本語のWebフォント「Noto sans japanese」の使い方をご紹介します。Adobe社と共同開発しているフォントなので読みやすく綺麗で設定も簡単です。極細から極太まで９種類あります。

見本

設定方法

@importを設定する

スタイルシート内に下記コードを記述します。

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

font-familyを指定する

続いてスタイルシート内に下記コードを記述します。

body {
font-family: ‘Noto Sans Japanese’, sans-serif;
font-size: 18px;
}

font-weightを指定する

フォントウェイト（font-weight）も同時に指定できます。
続いてスタイルシート内に下記コードを記述します。

.nt100 {font-weight:100;}
.nt200 {font-weight:200;}
.nt300 {font-weight:300;}
.nt400 {font-weight:400;}
.nt500 {font-weight:500;}
.nt600 {font-weight:600;}
.nt700 {font-weight:700;}
.nt800 {font-weight:800;}
.nt900 {font-weight:900;}

詳しくは、Googleの解説ページを参照ください。

Googleが提供しているフォントサイトからダウンロードできます。
URL：https://www.google.com/get/noto/