日本語のウェブフォントを利用する際、基本的な設計はガイドライン「【ウェブフォント】日本語ウェブフォントの軽量化」に沿って進める。以下はそれらを含むので重ねてになるが、Noto Sans CJK JPを採用する際の一連の流れと注意事項。

1.サブセット化

※Noto Sans CJK JPのサブセット版は「HiroyaYabiku/Noto-Sans-Japanese」で既に用意されているのでこちらを使う。

2.ウェイト(太さ)の選定

Noto Sans CJK JP ウェイト一覧

※ブラウザごとに太さが異なる症状を確認

Thin (100) テキストサイズのサンプル。テキストサイズのサンプル。

Light (300) テキストサイズのサンプル。テキストサイズのサンプル。

DemiLight (350) テキストサイズのサンプル。テキストサイズのサンプル。

Regular (400) テキストサイズのサンプル。テキストサイズのサンプル。

Medium (500) テキストサイズのサンプル。テキストサイズのサンプル。

Bold (700) テキストサイズのサンプル。テキストサイズのサンプル。

Black (900) テキストサイズのサンプル。テキストサイズのサンプル。

3.ローカルフォントの指定

ユーザー環境によっては、既にNoto Sans JPという名称で端末にインストールされていることがある。その場合はインストール済みのフォントを読み込ませたほうが早いので、CSSのfont-face src でlocalで指定するようにする。

4.CSS用スタイル

以下はCSSで設定する際のテンプレート（ThinとRegularだけ設定する例）。

@font-face {
font-family: 'Noto Sans CJK JP';
font-style: normal;
font-weight: 100;
src: local('Noto Sans CJK JP Light'),
local('NotoSansCJKjp-Light'),
local('NotoSansJP-Light'),
url('/fonts/NotoSansCJKjp-Light.woff2') format('woff2'),
url('/fonts/NotoSansCJKjp-Light.woff') format('woff');
}
@font-face {
  font-family: 'Noto Sans CJK JP';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans CJK JP Regular'),
       local('NotoSansCJKjp-Regular'),
       local('NotoSansJP-Regular'),
    url('/fonts/NotoSansCJKjp-Regular.woff2') format('woff2'),
    url('/fonts/NotoSansCJKjp-Regular.woff') format('woff');
}

5.バグ・不具合について

「Noto Sans Japaneseが、EdgeやIEで改行バグ」でも既に記載しているが、2019年1月現在でEdgeやIE11で改行部分にトーフ文字が表示される不具合が確認されている。その解消法は以下。CSSで対応する。

.br::before {
content: "\A" ;
white-space: pre ;
font-family: "serif";
}