PSDやAIファイルで太さを指定したフォントは、Webでは異なる太さを指定したほうがいい場合があります。
今回は、Noto Sansの3種類のウェイトで調べてみました。
結論
- Noto Sans CJK JP Black → font-weight: 800 → 700
- Noto Sans CJK JP Medium → font-weight: 500（変更なし）
- Noto Snas CJK JP Light → font-weight: 200 → 100
# もちろんケース・バイ・ケースなので、あくまで一例です。
ちなみに調査結果はこちら、「Noto Sans 調査」
Webフォント「Noto Sans」を使ってみる
設定はカンタン2ステップ。まずは、htmlのheadタグ内に下記を記述。そしてfont-familyを指定するだけ。
- html
- <link href=”https://fonts.googleapis.com/earlyaccess/notosansjapanese.css” rel=”stylesheet” />
- CSS
-
.noto-sans{ font-family: "Noto Sans Japanese"; }
使いどころに気をつけたい
2017年7月現在、Noto Sansは、7種類のウェイトをセットできます（調査しました「「Noto Sans 調査」」）。ただし、読み込みに時間がかかるため、日本語のテキスト量が多い場合はタイトルだけ適用させるなど、使いどころには気をつけたいですね。
似て非なるNoto
https://fonts.google.com/?query=noto&selection.family=Noto+Sans
これには日本語は含まれていません。https://fonts.googleapis.com/earlyaccess/notosansjapanese.css を使いましょう。
日本語が無料で使えるWebフォント、Google Fonts
ほかにも、日本語が無料で使えるWebフォントがあります。Google Fontsはこちら、https://googlefonts.github.io/japanese/。