こんにちは。デザイナーの（鈴）です。
今回はWebフォントで「Noto Sans」を使う方法を紹介します。
「Noto Sans」とは
GoogleとAdobeが協力して開発したフォントです。
世界中のあらゆる言語に対応することを目標に開発されており、
日本語の漢字にも対応しています。
※Adobeからは、『源ノ角ゴシック』として提供されています。
きれいなフォントで、読みやすく、ウェイトも7種類用意されています。
下記は引用ですが、「Noto」が「no more tofu（豆腐）」から由来していて驚きました。
世界中の言語をサポートすることを目標に、Apache License 2.0 のライセンスで配布が開始された。2015年9月29日に、SIL Open Font License 1.1 にライセンス変更。 コンピューターで表示できない文字がある場合、文字の代わりに小さい四角(□)が表示されることが多いが、Googleではそれを"豆腐"と呼んでおり、Webから取り除くためにNoto(no more tofu)フォントを作った
「Noto Sans Japanese」と「Noto Sans JP」の違い
「Noto Sans」には日本語フォントとして
「Noto Sans Japanese」と「Noto Sans JP」があります。
二つある経緯は正確にはわかりませんが、
当初日本語フォントは独立していたのですが、
途中から中国と韓国語と同じファミリーとして開発されるようになり、
2種類のフォントが存在するようです。
フォントの違いは下記になります。
ウェイト数
「Noto Sans Japanese」には、
「Thin 100」、「Light 300」、「DemiLight 350」、「Regular 400」、「Medium 500」、「Bold 700」、「Black 900」の7種類のウエイトがあります。
「Noto Sans JP」は「DemiLight 350」がなく、6種類になります。
文字数
「Noto Sans JP」の方がすこしだけ登録している文字数が多いです。
基本的な使い方ならどちらのフォントでも問題ありません。
ファイル数
ウェイト数が少ない分「Noto Sans JP」はファイルサイズが軽いです。
オープンタイプの場合は1/2ほどになります。
Webフォントとして使う場合は、woff2やwoffを使うのでほぼサイズの差はありません。
「Noto Sans」の使い方
@importで読み込む場合
スタイルシートに下記のように記述します。
【Noto Sans JPの場合】
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
【Noto Sans Japaneseの場合】
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
styleタグで読み込む場合
<head>内に下記のように記述します。
【Noto Sans JPの場合】
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
【Noto Sans Japaneseの場合】
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css">
フォントファミリーの指定
スタイルシート内の使いたい場所に下記のようにフォントファミリーを指定します。
h1 {
font-family: 'Noto Sans Japanese', sans-serif;
font-weight: 900;
}
p {
font-family: 'Noto Sans Japanese', sans-serif;
font-weight: 400;
}
例としてh1タグに「Black 900」、pタグに「Regular 400」のウェイトを指定しています。
まとめ
導入はとても簡単ですね。
通信環境が高速化しているとはいえ、まだファイルサイズが大きいので、
ウェイトを絞って使うのがいいと思います。
メイリオに飽きてきていたので、いいフォントに出会えて、うれしい限り！！
サイトの用途、目的に合わせて、「Noto Sans」を使ってみてはいかがでしょうか。
僕は気に入ったので、じゃんじゃん使ってみようと思います。
参考リンク
下記サイトは参考にしたサイトになります。
細かい説明や設定など、詳しく知りたい方はどうぞ。
http://toach.click/how-to-noto-sans-japanese/
http://oxynotes.com/?p=10293http://monochrome-design.jp/141
