「Google Fonts+ 日本語 早期アクセス」を使ってみる

Webフォント「Google Fonts」に、先月「日本語の9書体」が試験的に追加されましたので、早速使ってみました。
［参照］Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access
https://googlefonts.github.io/japanese/

フォント一覧

• M+ 1p （weight：7種類、多くの漢字も収録）
• Rounded M+ 1c （weight：7種類、多くの漢字も収録）
• はんなり明朝 （weight：1種類、ひらがな・カタカナのみ）
• こころ明朝 （weight：1種類、ひらがな・カタカナのみ）
• さわらび明朝 （weight：1種類、多くの漢字も収録）
• さわらびゴシック （weight：1種類、多くの漢字も収録）
• ニクキュウ （weight：1種類、カタカナのみ）
• ニコモジ （weight：1種類、ひらがな・カタカナ・英数字のみ）
• Noto Sans Japanese （weight：7種類、非常に多くの漢字も収録）

設定方法

【記述例】　「Noto Sans Japanese」（標準、太字）を設定する場合

＜HTML＞ head 内に追加

<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet">

＜CSS＞

body {
    font-family: "Noto Sans Japanese", san-serif;
    font-weight: 400; /* normal */
}
h1 {
    font-weight: 700; /* bold */
}

• 「san-serif」は、指定したWebフォントが表示できなかった場合や、Webフォントに含まれていない文字を 『ユーザの環境にある同じ系列の書体（この場合はサンセリフ体）を表示する』という設定（＝保険）です。
• 「Noto Sans Japanese」には 7種類の weight が用意されていますが、
  一般的に「font-weight: normal;」＝「400」、「font-weight: bold;」＝「700」に相当します。
  ［参照］font-weight - CSS | MDN
  https://developer.mozilla.org/ja/docs/Web/CSS/font-weight

デモ

【Webフォント表示例（9書体）】

• 例文
• 数字、アルファベット（大文字・小文字）、記号
• 「JIS第2水準」の漢字を含む単語（※現在はまだ開発中のため、非対応の漢字もたくさんあります。）
  　
  デモページ

　
【7種類の weight が用意されている 3書体の太さ比較】

• M+ 1p
• Rounded M+ 1c
• Noto Sans Japanese
  　
  デモページ

スマホサイトで使用した場合、気になる点

• Webフォントが表示されるまでに時間がかかるため、全文で使うにはまだ厳しい。（PCでも表示に少し時間がかかる。）
• 元々、明朝体が搭載されていない Android でも明朝体が使えるのはうれしい！
  見出しなどの一部分で使うなどの工夫をすれば効果的かと思います。（その場合は、一般的な漢字にも対応している「さわらび明朝」がおすすめ。）
• 一番細いweight「Thin（font-weight: 100;）」 は、細すぎてスマホ・タブレットでは視認性が低い。

　
まだ試験的に提供されているサービスではありますが、サイトの雰囲気に合わせて書体を選んでみてはいかがでしょうか？
　
　
［参照］2016.03.30「Webフォントを使ってみる(2016年版)」Tips Note
https://www.tam-tam.co.jp/tipsnote/html_css/post8573.html