40
29

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-08-16

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

使い方

(1)
使いたいフォント名の右上にある「+」をクリック。
[例]M PLUS 1p

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

(3)
「EMBED」と「CUSTOMIZE」というリンクが表示されますが、まずは「CUSTOMIZE」へ移動し、日本語を追加します。

『Languages』以下の『Japanese (Supported by M PLUS 1p)』というチェックボックスをチェック。
cap02.png

(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; }

(完成!)

 

対象フォント

  • 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+

sample_m.png

M PLUS Rounded 1c / Rounded M+

sample_mr.png

Sawarabi Mincho / さわらび明朝

sample_sm.png

Sawarabi Gothic / さわらびゴシック

sample_sg.png

Kosugi / 小杉ゴシック

sample_k.png

Kosugi Maru / 小杉丸ゴシック

sample_km.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

M PLUS Rounded 1c / Rounded M+

weight_m1_r.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

40
29
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
40
29