お盆休み中に、Webフォント「Google Fonts」の日本語フォントに新たな書体が追加されたようなので、早速使ってみました。
https://fonts.google.com/?subset=japanese
##使い方
（1）
使いたいフォント名の右上にある**「＋」**をクリック。
［例］M PLUS 1p
（2）
画面下に**「1 Family Selected」**と書かれた黒い帯が表示され、それをクリックするとウィンドウが開きます。
（3）
「EMBED」と「CUSTOMIZE」というリンクが表示されますが、まずは**「CUSTOMIZE」**へ移動し、日本語を追加します。
↓
『Languages』以下の『Japanese (Supported by M PLUS 1p)』というチェックボックスをチェック。
（4）
**「EMBED」**へ戻ると、必要な情報が表示されています。
・HTML の head 内へ追加。
<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p&subset=japanese" rel="stylesheet">
・CSSも設定
.wf-mplus1p { font-family: 'M PLUS 1p', sans-serif; }
（完成！）
##対象フォント
- M PLUS 1p / M+ （weight：7種類）
- M PLUS Rounded 1c / Rounded M+ （weight：7種類）
- Sawarabi Mincho / さわらび明朝 （weight：1種類）
- Sawarabi Gothic / さわらびゴシック （weight：1種類）
- Kosugi / 小杉ゴシック （weight：1種類）
- Kosugi Maru / 小杉丸ゴシック （weight：1種類）
※「M PLUS」と「Sawarabi」の 4書体は、「Google Fonts + 日本語 早期アクセス」でもおなじみ。（全く同じものかどうかは検証していませんが、大きな違いはなさそうです。）
※「Kosugi」は、元々は「MotoyaLCedar W3 mono」（モトヤLシーダ3等幅）、「Kosugi Maru」は、元々は「MotoyaLMaru W3 mono」（モトヤLマルベリ3等幅）として販売されていたフォントだそうです。
※「Kosugi」の日本語の正式名称は不明なので、仮の表記です。
［参照］
Google Fonts + 日本語 早期アクセス を使ってみた
http://qiita.com/umeume66/items/29c60534367b50252c88
##表示例
①例文 ※青空文庫「吾輩は猫である」より
②数字・アルファベット・記号
③開発中や非対応の漢字が多い「JIS第2水準の漢字」を含む例。（いつもの京極夏彦が好きなお寿司屋さんな例文）
対応していない文字には背景色を設定しています。
※すべて商用サイトでの使用OK。
※ゴシック系には「sans-serif」を、明朝系には「serif」も設定しています。
（フォントで対応していない文字は「sans-serif」または「serif」で表示されます。）
※行間は特に設定していません。（ブラウザのデフォルト）
###M PLUS 1p / M+
###M PLUS Rounded 1c / Rounded M+
###Sawarabi Mincho / さわらび明朝
###Sawarabi Gothic / さわらびゴシック
###Kosugi / 小杉ゴシック
###Kosugi Maru / 小杉丸ゴシック
##表示例（7種類の太さの比較）
上から順に、以下のように設定しています。
- Thin（font-weight: 100;）
- Light（font-weight: 300;）
- Regular（font-weight: 400;）
- Medium（font-weight: 500;）
- Bold（font-weight: 700;）
- Extrabold（font-weight: 800;）
- Black（font-weight: 900;）
###M PLUS 1p / M+
###M PLUS Rounded 1c / Rounded M+
##気づいたことなど
・「M PLUS」と「Sawarabi」の 4書体で対応していない文字は、「Google Fonts + 日本語 早期アクセス」と同じでした。
・「Kosugi」は行間が詰まっているので、ちょっと注意して広めに設定してあげるとよさそう。かわいらしい雰囲気で使いやすそうですが、ひらがな・カタカナ・英字の文字間が若干気になる...気がする。（行間をもっと広くしたらあまり気にならないかも？）
・「Sawarabi Mincho（さわらび明朝）」は、Photoshop で縦書きにすると崩れるようです。
##追記（2018.09.03）
社内でレビューしてもらって、いろいろ調整した記事をアップしました。
https://www.tam-tam.co.jp/tipsnote/html_css/post16293.html
「さわらび明朝」は、縦書きにすると Photoshop でも Web上でも崩れます。
※特に漢数字や句読点が問題で、文字同士が重なってしまうため、文章はほぼ読めません。（「さわらびゴシック」は無問題。）
なんかいい対処方法が見つかるといいな...・ﾟ・(つД｀)・ﾟ・
なお、『「お問い合わせ」や「TOPへ戻る」のような短文だったら大丈夫では？』とも思ってテストしてみたんですが、ブラウザによって表示位置が 1文字弱下にズレたり、ズレた分の文字が途中で切れたりしました。
せっかくの明朝体なのに、縦書きで使用するには色々がんばらないと厳しそうです。
引き続き、検証します。
##追記（2018.09.05）
Notoフォントも「Google Fonts」から使えるようになったそうです！
わーい！！待ってました！！！
●Noto Sans JP （weight：6種類）
https://fonts.google.com/specimen/Noto+Sans+JP
- Thin
- Light
- Regular
- Medium
- Bold
- Black
●Noto Serif JP （weight：7種類）
https://fonts.google.com/specimen/Noto+Serif+JP
- Extra-Light
- Light
- Regular
- Medium
- Semi-Bold
- Bold
- Black