デザインのメモ

ロゴやフォント、フォトショ・イラレのお話をします

「源ノ角ゴシック(Noto Sans)」をWebフォントとして使う簡単な方法

*追記*
必要な文字だけをサブセット化して、Webフォントを作れるMacAppを作りました!
Macを使っている人は良かったらこちらもどうぞ
nippori30.hatenablog.com


Webサイトを作るときに源ノ角ゴシック(Source Han Sans, Noto Sans)を使ったので、その時のメモです

基本的にはCSS数行で使えてしまいます
CSSの中身はこれです

fonts.css

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body {
	font-family: 'Noto Sans Japanese', sans-serif;
}

一応これだけで、全体を源ノ角ゴシックにすることができます

さらに、おすすめとしてはウェイト(文字の太さ)を指定できるようにする設定です

.w100 {font-weight: 100;}
.w200 {font-weight: 200;}
.w300 {font-weight: 300;}
.w400 {font-weight: 400;}
.w500 {font-weight: 500;}
.w700 {font-weight: 700;}
.w900 {font-weight: 900;}

数字は大きい方が文字が太く、classにw○○○をつけることで文字の太さが変えられます