• RSS

[CSS]Noto Sans JP のwebフォントを利用する方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

Noto Sansは、全言語対応を目指してGoogle とAdobe が共同開発したオープンソースのフォントで、Webフォントとして無料で提供されています。全言語対応を目指しているだけあって、当然日本語(和文)フォントも利用可能です。

今回はそんなNoto Sansフォントを、ブログやWEBサイトで手軽に利用する方法を紹介させていただきます。

Noto Sans JP (japanese) フォントのインポート

まずはご利用のCSSファイルに以下のインポート文を追加して、Noto Sansフォントを使えるようにします。
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

CSSファイルではなく、HTMLファイルの<head>内にlinkタグで指定する場合は↓こちらです。
<head>
<link href="http://fonts.googleapis.com/earlyaccess/notosansjp.css">
</head>

font-family の指定

次に、CSSファイルでfont-familyNoto Sans JPを指定します。

全てのテキストでNoto Sans JPを利用する場合はbodyタグにを指定しても良いですし、
body {
font-family: 'Noto Sans JP', sans-serif;
}

特定の要素(.notosans)にだけ適用させるには以下のように指定します。
.notosans	 {
font-family: 'Noto Sans JP', sans-serif;
}

font-weight の指定

Noto Sans JPフォントの太さは7種ありますので、CSSファイルで以下のようなfont-weightの指定を行います。
.weight100	 {
font-weight:100
}
.weight300	 {
font-weight:300
}
.weight400	 {
font-weight:400
}
.weight500	 {
font-weight:500
}
.weight600	 {
font-weight:600
}
.weight700	 {
font-weight:700
}
.weight900	 {
font-weight:900
}

Noto Sans JP (japanese) フォントのデモ

Noto Sans JPの太さ別の見え方は↓このような感じになります。
Noto Sans JP をwebフォントで利用する方法
Noto Sans JPのデモ画面はこちら



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す