使い倒せ！Google Fonts 導入方法と今使える日本語フォント8種

公開日：2020/04/02

今やサイト制作の現場では欠かせないものとなったWebフォント。
サーバにフォントデータをアップして、webサイトやブログにそのフォントを表示させるのがWebフォントですね。
Webフォントを使わない場合、ある程度はfont-familyで指定できるとはいえ、webページを閲覧する端末にインストールされているフォントしか表示できないため、各端末で統一した文字を表示させることはできません。
ですがWebフォントを使えば、フォントをサーバから読み込むため、どの端末でも同じフォントで表示することができます！

Webフォントを利用する時、とても便利なのがGoogle Fonts。完全無料で利用できますし、商用利用も無料です。使用するフォント数が多くなればその分重くなりますが、それでもGoogleの高速サーバから利用することができます。
このGoogle Fontsで利用できる日本語フォントは現在8種類（2020年3月現在）。今回はGoogle Fontsの利用方法と、この8種類の日本語フォントを紹介していこうと思います！

Google Fontsの導入方法

まずはGoogle Fonts(https://fonts.google.com/)のページにアクセスし、使用したいフォントを選びます。選んだら右上の「+」をクリックします。追加したフォントは右下のリストの中に追加されていきます。複数選択も可能です。

追加したフォントは、黒いバーの「-」をクリックすると、太さや斜体などスタイルをカスタムすることができます。

[EMBED]をクリックすると、下に<link rel… というコードが表示されます。これをコピーして、htmlの<head>〜</head>の中に貼ります。
※CSSから読み込むことも可能です。その場合は、［@import］をクリックして表示されるコードをCSSファイルに貼りましょう。

使いたいフォント名をCSSに記載します。Google Fontsに戻り、ウィンドウの一番下に「font-family:’◯◯’」という形でフォント名が記載されていますので、そのフォント名をCSSのfont-familyに追加しましょう。

これで、Webフォントが表示されるはずです！

Google Fontsの日本語フォント8種

Google Fontsで使える日本語フォントは現在8種類です。(Google Fontsの検索にて「Japanese」でソートをかけた場合のことです)
英語フォントに比べるとはるかに少ないですが、これは、文字数が圧倒的に多い日本語の性格を考えると仕方がないのかもしれません。読み込みも重くなる傾向があります。
日本語フォントは通常のフォントを使い、タイトル部分に使う英語だけをWebフォントにするのも手です。それだと、読み込みにさほど時間がかからず、見た目を整えることができます。
ですが、サイト全体の日本語フォントを統一するのもスタイリッシュですよね。ここでは、Google Fontsで使える日本語フォントを紹介していきます。

Noto Sans JP

Notoのゴシック体です。パソコンやモバイル端末での可読性を重要視されたフォントで、「Noto」の由来は「no more tofu」からきてきます。表示できない文字が「豆腐」と呼ばれる□で表示されることがよくありますが、その”豆腐”が現れることがなくなるようにという意味が込められているのだそうです。

M PLUS 1p

ゴシック体のフォントです。無料で種類も多いことで有名なM+ FONTSですね。M+の中でも無難なものだと思います。直線処理と柔らかな曲線の対比が特徴的とされているM+ 1で、英数字がプロポーショナルです。

Sawarabi Mincho

さわらびフォントの明朝体です。webで使える数少ない明朝体のひとつだと思います。教育漢字と第一水準漢字に対応しています。力強くはっきりしていて見やすいフォントですね。

Noto Serif JP

Notoの明朝体です。さわらび明朝よりもクセが少なく、使いやすいのではないでしょうか。ただし、IE11で表示されないという現象も見られるようです。その際はGoogle Fonts側でNoto Serif JPを選択した際に「CUSTOMIZE」をクリックし、下の方にLanguagesという項目があるので「Japanese」をチェックします。その後は「EMBED」に戻り、上記の方法でWebフォントを設定すればいいそうです。

M PLUS Rounded 1c

M+ FONTをベースに丸ゴシック加工されたフォントです。M+ FONTが持っているモダンな雰囲気をそのままに、角が丸くなり明るく親しみやすい書体となっています。

Sawarabi Gothic

さわらびフォントのゴシック体です。くっきりとして読みやすく、落ち着きのあるクラシックな印象があります。筆先に遊び心があり、独特の雰囲気を持っていますね。

追記

日本語フォントの読み込み時間が気になる時はフォントを選んだ時に表示される「Load Time」を目安にしましょう。「Fast」であれば比較的読み込み時間が早いようです。
体感的には、日本語フォントをひとつ使うぐらいなら問題ないような気がしますが、二種類、さらに太字などのカスタムも加えたりなどすると
読み込みに時間がかかるように思います。サイトが表示された時、テキストが一瞬他のフォントで表示されるのは少々かっこ悪いものがありますね。
サイトのデザインも考慮し、適切なWebフォントを選んでいきましょう！