源ノ角ゴシックとNoto Sansをcssで指定

源ノ角ゴシック（Source Han Sans）とNoto Sans内のメタデータを調べたので、cssのfont-familyとしてあてがってみました。

源ノ角ゴシックとNoto Sansをcssで指定してみるテスト

◎確認するにはあらかじめフォントをインストールしておく必要があります。

Preferred Family（日・英の2つ）だけが「ファミリー」でフォントを命名していますが、それ以外はウェイト込みの名称となります。源ノ角ゴシックは「Normal」、Noto Sansは「Regular」を使用しました。

異なるnameIDに対して同じ命名（文字列）をしている箇所も多いので、実際には数個（源ノ角ゴシック：5個）で済みました。Noto Sansは言語別の命名をしていないのでさらに少なく（Noto Sans：3個）なります。

• 源ノ角ゴシック（Windows用・日本語・Preferred Family）
• 源ノ角ゴシック Normal（Windows用・日本語・Full font name 兼 Family name）
• Source Han Sans J Normal（英語・Full font name 兼 Family name）
• Source Han Sans J（Windows用・英語・Preferred Family）
• SourceHanSans-Normal（Postscript name）

• Noto Sans Japanese（Windows用・Preferred Family）
• Noto Sans Japanese Regular（Full font name 兼 Family name）
• NotoSansJp-Regular（Postscript name）

複数のOS、ブラウザで表示を確認してみていますが対応はバラバラです。昔からちっとも変わっていません

ざっくり調べてみたところ、

Macintosh Chrome:

• Source Han Sans J（Windows用・英語・Preferred Family）
• SourceHanSans-Normal（Postscript name）
• Noto Sans Japanese（Windows用・Preferred Family）
• NotoSansJp-Regular（Postscript name）

Macintosh Safari:

• Source Han Sans J（Windows用・英語・Preferred Family）
• SourceHanSans-Normal（Postscript name）
• Noto Sans Japanese（Windows用・Preferred Family）
• NotoSansJp-Regular（Postscript name）

Macintosh Firefox:

• 源ノ角ゴシック（Windows用・日本語・Preferred Family）
• 源ノ角ゴシック Normal（Windows用・日本語・Full font name 兼 Family name）
• Source Han Sans J Normal（英語・Full font name 兼 Family name）
• Source Han Sans J（Windows用・英語・Preferred Family）
• SourceHanSans-Normal（Postscript name）
• Noto Sans Japanese（Windows用・Preferred Family）
• Noto Sans Japanese Regular（Full font name 兼 Family name）
• NotoSansJp-Regular（Postscript name）

Windows Crome:

• 源ノ角ゴシック Normal（Windows用・日本語・Full font name 兼 Family name）
• Source Han Sans J Normal（英語・Full font name 兼 Family name）
• SourceHanSans-Normal（Postscript name）
• Noto Sans Japanese Regular（Full font name 兼 Family name）
• NotoSansJp-Regular（Postscript name）

Windows IE11:

• 源ノ角ゴシック（Windows用・日本語・Preferred Family）
• 源ノ角ゴシック Normal（Windows用・日本語・Full font name 兼 Family name）
• Source Han Sans J Normal（英語・Full font name 兼 Family name）
• Source Han Sans J（Windows用・英語・Preferred Family）
• Noto Sans Japanese Regular（Full font name 兼 Family name）
• Noto Sans Japanese（Windows用・Preferred Family）

Windows Firefox:

• 源ノ角ゴシック（Windows用・日本語・Preferred Family）
• 源ノ角ゴシック Normal（Windows用・日本語・Full font name 兼 Family name）
• Source Han Sans J Normal（英語・Full font name 兼 Family name）
• Source Han Sans J（Windows用・英語・Preferred Family）
• Noto Sans Japanese（Windows用・Preferred Family）
• Noto Sans Japanese Regular（Full font name 兼 Family name）

の記述が有効でした。ただし、「Preferred Family」が機能してもその際に表示されるウェイトはまちまちです。

ウェイト含めて意図通り表示させようとするとさらにブラウザごとの表示が変わります。

源ノ角ゴシックExtraLightとNoto Sans Thinをcssで指定してみるテスト

実際に使う際には、複数の名称を重ねる必要があります。また、ユーザーが源ノ角ゴシック／Noto Sansのどちらをインストールしているかはわからないので、両方とも記述する必要があります。エラーの発生する（が反応してしまう）指定を先に記述すると、意図する表示が実現しません。

さらに、Bold（<strong>タグ）の再定義も必要だと思います。