BLOG
ブログ

チルチルミチルからのお知らせ・日々の出来事・
アウトプットの場所として日々更新しております。
時々地元クリエイターとのコラボブログもやってます!

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

1

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

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

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

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

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

日本語フォント一覧(2018年10月現在)

Noto Sans JP

Noto Serif JP

Sawarabi Gothic

Sawarabi Mincho

M PLUS 1p

M PLUS Rounded 1c

Kosugi

Kosugi Maru

全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フォントでもスピーディに表示させることができます。
ぜひ、実際の案件でお試しください!

ヨカね!

この記事が面白かったらポチッってください!

関連記事

Contact