簡単っ!Googleの日本語Webフォント見本と使い方

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

見本

font-weight100
読みやすく綺麗なWebフォントはあなたのウェブサイトデザインを一新します。

font-weight200
読みやすく綺麗なWebフォントはあなたのウェブサイトデザインを一新します。

font-weight300
読みやすく綺麗なWebフォントはあなたのウェブサイトデザインを一新します。

font-weight400
読みやすく綺麗なWebフォントはあなたのウェブサイトデザインを一新します。

font-weight500
読みやすく綺麗なWebフォントはあなたのウェブサイトデザインを一新します。

font-weight600
読みやすく綺麗なWebフォントはあなたのウェブサイトデザインを一新します。

font-weight700
読みやすく綺麗なWebフォントはあなたのウェブサイトデザインを一新します。

font-weight800
読みやすく綺麗なWebフォントはあなたのウェブサイトデザインを一新します。

font-weight900
読みやすく綺麗なWebフォントはあなたのウェブサイトデザインを一新します。

設定方法

@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/

関連記事

  1. WordPressプラグイン『Compress JPEG &…

カテゴリー