超厳選！Googleフォントおすすめ40選を用途別に紹介【導入方法解説付き】

ユーザの閲覧環境にかかわらず同じ見た目で表示してくれて、しかも超絶カッコイイとあって、爆発的な勢いでウェブ界を席巻しつつあるGoogleフォント。

今回の記事では、そのGoogleフォントの中でも特におすすめの40フォントを雰囲気・用途別に分類し、紹介していく。

紹介の前に

フォント選びの基準とコツ

変わったフォントや特徴的なフォントが良いフォントなのではない。理想的なフォントというのは、悪目立ちせず、印象にも残らないのだけど、よくよく見てみるとその制作物の雰囲気にバッチリと合っているもの。奇抜なファッションよりもさりげなく似合う服が好感度を上げてくれるのと同じことだ。

本当にかっこいいものは、さりげない。ユニークなフォントを選ぶときには、本当にそれでないといけないのかをよく考えないといけない。商業デザインでは当たり前のことだが、素人はつい忘れがちになってしまうので注意したい。

ロゴ用と文章用の区別

本記事では、フォントをロゴ用と文章用に区別している。この基準は可読性だ。フォントがいくらかっこよくても、長文になったときに読みづらければ文章で使うのには向かない。そのため、可読性の低いフォントはロゴ用とした。ロゴ用はなるべくロゴやタイトルのみに使うことをおすすめする。

逆に、文章用としたフォントをロゴやタイトルに使う分には全然問題ない。

Googleフォントは重い？

Webフォントは使い過ぎるとページの表示が遅くなると言われる。確かに、10個も20個も導入すれば重くなりうるが、2～3個の英文用フォントを導入する程度であればほとんど影響はない。選んだフォントがどれくらい重いかは、フォントを選び終わった段階で確認することができる。

右側のスピードメーターのような画像が、フォントの重さを表している。ご覧のとおり、2個選んでも緑色の安全圏におさまっている。

※Noto Sans JapaneseやNoto Sans CJKといった、漢字・ひらがな・カタカナを含むフォントは非常に重いので、現時点では導入はお勧めしていない。

万能フォント

優れたフォントとは、シンプルさと読みやすさを極め、特徴を排したものだ。そうした何にでも使える万能フォントが以下の7つ。まずはこの中から選ぶことをオススメする。

Noto Sans

定番のサンセリフ体。シンプルで読みやすい。Google Fonts Noto Sans

Noto Serif

セリフ体なので、長文や印刷物用におすすめ。Google Fonts Noto Serif

Open Sans

F Lab.でも採用しているオススメのシンプルフォント。Google Fonts Open Sans

Bitter

読みやすく説得力があり、長文におすすめ。Google Fonts Bitter

Libre Baskerville

ちょっとだけエレガント寄りのシンプルフォント。Google Fonts Libre Baskerville

Crimson Text

読みやすいのに心にグッとくる。Google Fonts Crimson Text

Signika

親しみやすく、それでいてしっかりしている。Google Fonts Signika

技術系

少し特徴のあるフォントが向いている。

ロゴ用

Candal

親しみやすさを印象づけるために。Google Fonts Candal

Abel

シックに気取るなら。Google Fonts Abel

Titillium Web

レトロゲームのような一周回ったオシャレさ。Google Fonts Titillium Web

Play

レトロゲーム感その2。Google Fonts Play

Muli

丸みのあるフォント。Google Fonts Muli

Passion One

ちょうどいい主張の強さ。Google Fonts Passion One

Exo

あえてぎこちなさを出す。Google Fonts Exo

文章用

Slabo

読みやすく、長文におすすめ。Google Fonts Slabo

Dosis

遊びのあるクールさ。Google Fonts Dosis

Inconsolata

ちょっとプログラミングコードっぽいフォント。Google Fonts Inconsolata

美容・ファッション系

細めの字体のエレガントなフォントが向いている。

ロゴ用

Poiret One

華奢、女性らしさ、高級感の演出に。Google Fonts Poiret One

Josefin Sans

シックな女性っぽく。Google Fonts Josefin Sans

Cinzel

大文字しか無い、ロゴ専用文字。大文字で書いた文字はよく見ると微妙に大きく表示されている。Google Fonts Cinzel

Dancing Sctipt

流れるような美しさ。Google Fonts Dancing Sctipt

文章用

Lora

読みやすくかつエレガント。Google Fonts Lora

Playfair Display

読みやすさとかっこよさの両立。Google Fonts Playfair Display

Slabo

読みやすく、長文におすすめ。Google Fonts Slabo

PT Sans Narrow

ちょっとした短文を入れたりするのにかっこいいフォント。Google Fonts PT Sans Narrow

飲食・料理系

気持ちが自然と上がるような、ポップなフォントが向いている。

ロゴ用

Montserrat

丸みがあって、字がすでにおいしそう。Montserrat

Yanone Kaffeesatz

違うタイプだけど、こちらもなんだかおいしそう。Yanone Kaffeesatz

Lobster

ポップかつカッコイイ。Lobster

Pacifico

アメリカンを追求するなら。Pacifico

文章用

PT Sans

可読性重視。ややポップ寄り。Google Fonts PT Sans

Dosis

あたたかみのあるクールさ。Google Fonts Dosis

Fjalla One

存在感があるので、ビシッと決める短文に。Google Fonts Fjalla One

スポーツ系

力強さのあるシンプルなフォントが向いている。

ロゴ用

Oswald

力強いのに落ち着きのあるフォント。Google Fonts Oswald

Patua One

力強さと信頼を印象づける。Google Fonts Patua One

Abel

オシャレにいくなら。Google Fonts Abel

学問系

シンプルで読みやすいフォントが向いている。万能系の定番フォントから選べば間違いない。

ロゴ用

Fjalla One

説得力があるフォント。Google Fonts Fjalla One

Alegreya Sans

小さめの白抜き文字に使うイメージ。Google Fonts Alegreya Sans

文章用

Hind

シンプルかつスタイリッシュ。Google Fonts Hind

Bitter

読みやすく説得力があり、長文におすすめ。Google Fonts Bitter

生活系

頑張りすぎず、抜けがあって可愛らしいフォントが向いている。

ロゴ用

Nunito

丸くて若々しい。Google Fonts Nunito

Bangers

衝撃的！な感じ。大文字しかないのでロゴか短文に。Google Fonts Bangers

Ubuntu Condensed

いい意味で肩の力が抜けたフォント。Google Fonts Ubuntu Condensed

Ubuntu

こちらも肩の力が抜けていて、可愛げがある。Google Fonts Ubuntu

Raleway

気取らないオシャレ。Google Fonts Raleway

Muli

丸みがありながら、スッキリシンプルに整っている。Google Fonts Raleway

Chewy

かなり特徴的なので、イメージがピッタリなときだけ。Google Fonts Chewy

文章用

Noto Serif

可読性最重視。長文におすすめ。Google Fonts Noto Serif

Googleフォントの導入方法解説

ロゴ用としてCandalを、文章用としてNoto Sansを選ぶという例で解説する。

導入までのざっくりとした流れ：

Googleフォントにアクセスする。
Googleフォントのページで、使いたいフォントをコレクションに追加する。
選んだフォントの詳細情報を指定する。
自分のWebページの<head>タグの直下にコードをコピペし、「このGoogleフォントを使います！」と宣言する。
Webページのcssにコードをコピペし、Googleフォントを実装する。

これだけ。クリックとコピペだけでいける。

Googleフォントにアクセス

Google Fontsこちらから。

使用したいフォントをコレクションに追加する

今回の例ではCandalが使いたいので、”Candal”と左上のボックスに入力した。使いたいフォント名を入力してください。

Candalが表示されていることを確認し、Add to Collectionをポチッと押すことでコレクションに追加する。同じように、使用したいフォント全てについて、「検索→コレクションに追加」の作業を行う。

使用したい全てのフォントをコレクションに追加したら、Useをクリックする。

選んだフォントの詳細情報を指定

1. Choose the styles you want.では、「イタリックとかボールドとかあるけどどれがいい？」と聞かれている。ここは特になにもせず、初めから選ばれているNormal 400だけでいい。また、ここで右のスピードメーターみたいなものを見ることで、選んだフォントファイルの重さが確認できる。

2. Choose the character sets you want.では、「ドイツ語用の変な文字とか使う？使うんだったらチェックしといて」と言われている。ここもスルーでOK。

WebページにGoogleフォントを導入

3. Add this code to your website.の下のボックスに自動的に表示されているコードを、自分のWebサイトの<head>タグの直下にコピペする。

はてなブログの場合は、「ダッシュボード＞設定＞詳細設定＞検索エンジン最適化」と進み、「headに要素を追加」のボックスにこのコードをコピペする。

CSSファイルにコピペし、Googleフォントを実装！

ここまでくれば、あとは自分のWebページのcssファイルに、適切な形でコードをコピペしていくことで実装できる。

はてなブログの場合、デザインcss（ダッシュボード＞デザイン＞カスタマイズ＞デザインcss）に以下のコードをコピペすればOK。もちろん、CandalやNoto Sansの部分を自分が使用するGoogleフォントの名前に変更してください。

タイトルのフォントをCandalに変更する場合：

#title a{
font-family: 'Candal', sans-serif;
}

本文のフォントをNoto Sansに変更する場合：

body {
font-family: 'Noto Sans', "Helvetica Neue", Helvetica, "Avenir Next", "游ゴシック体", '游ゴシック', YuGothic, 'Yu Gothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, sans-serif;
}

フォント指定がNoto Sansの他にもずらずらと並んでいるのは、何らかの理由でNoto Sansを表示できない環境のユーザのための保険。Noto Sansが表示できなければHelvetica Neueを表示、それも無理なら…と続いていくようになっている。

また、このコードでは日本語フォントのトップが游ゴシック体になっている。この場合日本語表示の再優先フォントが游ゴシック体になる。游ゴシックが好きでない人は、メイリオを游ゴシックの前に持ってきてください。