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

CSS

2015.01.232024.08.22

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

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

Noto Sans JP (japanese) フォントのインポート
font-family の指定
font-weight の指定
Noto Sans JP (japanese) フォントのデモ

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

まずはご利用のCSSファイルに以下のインポート文を追加して、Noto Sansフォントを使えるようにします。

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

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

CSSファイルではなく、HTMLファイルの<head>内にlinkタグで指定する場合は↓こちらです。

<head>
<link href="http://fonts.googleapis.com/earlyaccess/notosansjp.css">
</head>

<head>

</head>

font-family の指定

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

全てのテキストでNoto Sans JPを利用する場合はbodyタグにを指定しても良いですし、

body {
	font-family: 'Noto Sans JP', sans-serif;
	}

body {

font-family: 'Noto Sans JP', sans-serif;

}

特定の要素（.notosans）にだけ適用させるには以下のように指定します。

.notosans	 {
	font-family: 'Noto Sans JP', sans-serif;
	}

.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
	}