お盆休み中に、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