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

HTML・CSS

Webフォント「Google Fonts」に、新たな日本語フォントが正式に追加されましたので、早速使ってみました。

［参照］
・Google Fonts
https://fonts.google.com/?subset=japanese
※右の検索メニュー『language』から「Japanese」が選択できるようになりました！

・News - Google Design
08/22/2018 「Google Fonts launches Japanese support—and makes loading large fonts even faster」＜英語＞
https://design.google/news/google-fonts-launches-japanese-supportand-makes-loading-large-fonts-even-faster/

追加されたフォント

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種類）

使い方

設定方法は複数ありますが、一例をご紹介します。
　
【1】
使いたいフォント名の右上にある「＋」をクリック。
［例］ M PLUS 1p

　
【2】
画面下に「1 Family Selected」と書かれた黒い帯が表示され、それをクリックするとウィンドウが開きます。

　
【3】
「EMBED」と「CUSTOMIZE」というリンクが表示されますが、まずは「CUSTOMIZE」へ移動します。
↓
『Languages』以下の『Latin (Supported by all Fonts)』がデフォルトで選択されていますが、このままではラテン語（英数字や記号など）しか使えませんので、日本語フォントを使用するために『Japanese (Supported by M PLUS 1p)』のチェックボックスをチェック！

【4】
「EMBED」へ戻ると、日本語フォントを使用するために必要な情報に更新されています。
・HTML の head 内へ追加。

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

・CSSも設定。

.wf-mplus1p { font-family: 'M PLUS 1p', sans-serif; }

（完成！）

　
【5】
●デモ： Webフォント表示例（全6書体）

例文
数字、アルファベット（大文字・小文字）、記号
「JIS第2水準」の漢字を含む単語（※一般的な文章には使わないものが多いので、非対応の漢字もたくさんあります。）

デモページ

　
●デモ： 7種類の weight が用意されている 2書体の太さ比較

M PLUS 1p / M+
M PLUS Rounded 1c / Rounded M+

デモページ

まとめ

「Google Fonts+ 日本語早期アクセス」に比べると、表示がとても早い！
IE11 でも問題なく表示できました！

　
●各書体についての補足情報など

「M PLUS」と「Sawarabi」の 4書体は、「Google Fonts + 日本語早期アクセス」でもおなじみ。対応していない文字も同じでした。
なお、『「Google Fonts + 日本語早期アクセス」では使えなくなっている』という情報もありますので、今後は「Google Fonts」を使った方が良さそうです。
「Kosugi」は、元々は「MotoyaLCedar W3 mono」（モトヤLシーダ3等幅）、「Kosugi Maru」は「MotoyaLMaru W3 mono」（モトヤLマルベリ3等幅）として販売されていたフォントだそうです。以前、Android に搭載されていたフォントなので、なんだか懐かしいですね。
「Kosugi」は行間が詰まっているので、注意してちょっと広めに設定してあげると文章が読みやすそう。
縦書きにすると、「Sawarabi Mincho」（さわらび明朝）は Web上でも Photoshop でも表示が崩れます。※特に漢数字や約物で表示が崩れるため、長文での使用は厳しい。また、CSSの文字詰め（font-feature-settings: "palt";）も効きません。
ワンポイントとして短文で使う場合も、ブラウザや日本語/英数字によって表示位置などにバラつきがあるため調整が必要です。縦書きで使用される場合は十分ご注意ください！！