Google Fonts に新たに追加された日本語フォントを使ってみた

お盆休み中に、Webフォント「Google Fonts」の日本語フォントに新たな書体が追加されたようなので、早速使ってみました。
https://fonts.google.com/?subset=japanese


##使い方
（1）
使いたいフォント名の右上にある**「＋」**をクリック。
［例］M PLUS 1p

（2）
画面下に**「1 Family Selected」**と書かれた黒い帯が表示され、それをクリックするとウィンドウが開きます。
<img width="1053" alt="cap01.png" src="https://qiita-image-store.s3.amazonaws.com/0/6168/57fea79a-a3d5-3d78-ae86-7c6b3b0998bd.png">


（3）
「EMBED」と「CUSTOMIZE」というリンクが表示されますが、まずは**「CUSTOMIZE」**へ移動し、日本語を追加します。
↓
『Languages』以下の『Japanese (Supported by M PLUS 1p)』というチェックボックスをチェック。
![cap02.png](https://qiita-image-store.s3.amazonaws.com/0/6168/7742640d-f246-af7b-90b0-81ace1bc0d43.png)

（4）
**「EMBED」**へ戻ると、必要な情報が表示されています。
・HTML の head 内へ追加。

```html
<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p&amp;subset=japanese" rel="stylesheet">
```

・CSSも設定

```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


##表示例
①例文 ※青空文庫[「吾輩は猫である」](http://www.aozora.gr.jp/cards/000148/files/789_14547.html)より
②数字・アルファベット・記号
③開発中や非対応の漢字が多い「JIS第2水準の漢字」を含む例。（いつもの京極夏彦が好きなお寿司屋さんな例文）
対応していない文字には背景色を設定しています。
　
※すべて商用サイトでの使用OK。
※ゴシック系には「sans-serif」を、明朝系には「serif」も設定しています。
（フォントで対応していない文字は「sans-serif」または「serif」で表示されます。）
※行間は特に設定していません。（ブラウザのデフォルト）

###M PLUS 1p / M+
![sample_m.png](https://qiita-image-store.s3.amazonaws.com/0/6168/7a74530c-e1a8-469d-e79a-2dd1f92f3890.png)

###M PLUS Rounded 1c / Rounded M+
![sample_mr.png](https://qiita-image-store.s3.amazonaws.com/0/6168/d60dd916-a1b9-471b-4b81-a7541eb8eda8.png)


###Sawarabi Mincho / さわらび明朝
![sample_sm.png](https://qiita-image-store.s3.amazonaws.com/0/6168/e7d75aa9-3f91-7e5d-ee7d-d68681d0bff1.png)

###Sawarabi Gothic / さわらびゴシック
![sample_sg.png](https://qiita-image-store.s3.amazonaws.com/0/6168/3366cd96-4c53-9439-f2f9-2def4354d527.png)


###Kosugi / 小杉ゴシック
![sample_k.png](https://qiita-image-store.s3.amazonaws.com/0/6168/2cc59465-7e4d-c8f0-c581-f9b1838e0cce.png)

###Kosugi Maru / 小杉丸ゴシック
![sample_km.png](https://qiita-image-store.s3.amazonaws.com/0/6168/702ba29f-a17a-8d1c-d20e-f34223e44e05.png)



##表示例（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+
![weight_m1.png](https://qiita-image-store.s3.amazonaws.com/0/6168/4549f562-64a8-080b-cfbe-8c73aa38a546.png)

###M PLUS Rounded 1c / Rounded M+
![weight_m1_r.png](https://qiita-image-store.s3.amazonaws.com/0/6168/74d7a836-c381-c035-c7e2-17e37fd5c55a.png)


##気づいたことなど
・「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