【無料WEBフォント】GoogleFontsへ、遂に日本語が追加されました！

みなさま、こんにちは！チルチルミチルの竹下です。
本日は、WEB制作の仕事をしている人なら、みんな嬉しいニュースが飛び込んできましたね。

「祝！GoogleFontsに日本語追加！」

いつものように、Googlefontsを閲覧しようとサイトを開いたら、
日本語の表記が出ていた時、思わず鳥肌が立ってしまいました。
これまでは、「Google Fonts + 日本語早期アクセス」を利用しておりましたが、
GoogleFontsでは、お馴染みのNoto Sans Japaneseだけでなく、
明朝体が増えて、より日本語WEBフォントを使用できるケースが増えてきそうです！

本日は、あたらしいGoogleFontsの日本語版のご紹介をいたします。

どんなフォントの種類が追加されたのか？

日本語フォント一覧（2018年10月現在）

全8種類のフォントが実装され、ゴシック体、明朝体、丸ゴシック体が利用できます。
サイドメニューのLanguagesより日本語フォントを絞ることができます。

実装方法

①使用したいフォントの右上をクリックし、フォントを1つ追加する。
※複数選択するとまとまって、コードが生成されるので、注意が必要です。

②画面右下のフォント選択画面をクリックし、展開させます。
展開後、まず青枠のCUSTOMIZEのボタンをクリックします。

③フォントのカスタマイズ画面で、フォントの太さ設定とJapaneseにチェックを入れます。
フォントの太さは、種類を増やしすぎると、ファイルが重くなるので、限られたものだけ選択しましょう。

④EMBEDをクリックし、前の画面に戻ります。生成されたコードは該当箇所に記述していきます。

気になる点を検証してみた！

日本語のフォントで個人的に気になる2つを調べてみました。

1．縦書きはどう表示されるか？

Noto Sans JP
縦書きテストです。
0123456789@㈱©

Noto Serif JP
縦書きテストです。
0123456789@㈱©

Sawarabi Mincho
縦書きテストです。
0123456789@㈱©

Sawarabi Gothic
縦書きテストです。
0123456789@㈱©

M PLUS 1p
縦書きテストです。
0123456789@㈱©

M PLUS Rounded 1c
縦書きテストです。
0123456789@㈱©

Kosugi
縦書きテストです。
0123456789@㈱©

Kosugi Maru
縦書きテストです。
0123456789@㈱©

Sawarabiはちょっと挙動がおかしいようですね…

2.ベースラインのバグはあるのか？

Noto Sans JP　縦中央にそろっている？0123456

Noto Serif JP　縦中央にそろっている？0123456

Sawarabi Mincho　縦中央にそろっている？0123456

Sawarabi Gothic　縦中央にそろっている？0123456

M PLUS 1p　縦中央にそろっている？0123456

M PLUS Rounded 1c　縦中央にそろっている？0123456

Kosugi　縦中央にそろっている？0123456

Kosugi Maru　縦中央にそろっている？0123456

こちらは、ほぼ問題なさそうですね！

最後に

GoogleのWEBフォントは、Googleの高性能なサーバーとまた最小ファイルで送信を行う圧縮技術で日本語のWEBフォントでもスピーディに表示させることができます。
ぜひ、実際の案件でお試しください！

タケシタ

グルメ好きなWEBデザイナー兼ディレクター