Table of Contents
By Marine Larmier - 最終更新日
次のウェブプロジェクトにおすすめの Google Fonts を探していませんか？
フォントは、ブランドアイデンティティ全体を構成する重要な要素です。フォントはオーディエンスの感情（ひいては購入の意思決定のプロセス）に影響するため、状況に応じて慎重に選ぶ必要があります。Disney や Coca-Cola のように、名前を出すだけで特定のフォントが自然と連想される有名ブランドもあります。
Google のカタログには1,000種類を超えるフォントがありますが、大変な作業は私たちが代わりに引き受け、最も人気のある11種類を選びました。ニーズや分野に合うフォントが必ずあることがわかるでしょう！
Google Fonts とは？
Google Fonts は、オンラインでもオフラインでも、あらゆるプロジェクトに使えるウェブフォントの充実したコレクションです。無料のオープンソースなので、ロゴ、印刷物、アプリ、教材、電子書籍などに商用利用できます。追加のライセンス料金が必要ないのは、確かなメリットです。検索ボックスと用意されているさまざまなフィルターを使えば、ディレクトリから直接、ぴったりの Google Fonts を見つけられます。
Google Fonts は Google のコンテンツデリバリーネットワーク（CDN）から取得され、サイトにアップロードすると自動的に読み込まれるため、通常はパフォーマンスにそれほど影響しません。
WordPress での Google Fonts の選び方と使い方
ウェブサイトに最適な Google Fonts を選ぶときは、読みやすさと、状況や業界に合った見た目と雰囲気を考慮するとよいでしょう。
1. 読みやすさとアクセシビリティ
読みやすさとは、オンラインの文章が人にとってどれだけ読みやすく、読む気にさせるものかを表す言葉です。下の例からわかるように、ウェブデザインではフォントが読みやすさに直接影響します。「Roboto」フォントで書かれた記事は、「Kablammo」フォントの記事よりも読みやすく見えます。
アクセシビリティは、ウェブページで使うフォントのサイズ、色、コントラストとも関係しています。すべての人がフォントを読めるように、Web コンテンツ・アクセシビリティ・ガイドラインを確認しましょう。
2. 業界に合った見た目と雰囲気
どのフォントも、顧客がオンラインや街なかで何かを読むときの感情に影響を与えます。レゲエバーと弁護士事務所に同じフォントは使えません。デザインの決まりごとが違うからです。同じように、幼稚園のウェブサイトを作るなら、親しみやすく気軽な印象のフォントを選ぶのがよいでしょう。一方、クライアントが高級ブランド寄りであれば、上品さと洗練された印象を表現できるフォントにするとよいでしょう。
実例を挙げると、Formula 1 のウェブサイトは、チケット販売サイトにぴったりのフォントを選んでいます。適切なフォントを選ぶことで、「レーシング」や「自動車」らしい見た目と雰囲気を生み出しています。
ボーナス：ウェブサイトで使われているフォントを特定する方法
無料の Chrome 拡張機能「WhatFont」をインストールして、気に入ったフォントにマウスカーソルを重ねると、フォントファミリー、ウェイト、サイズなど、さまざまな情報を特定してくれます。
WordPress で Google Fonts を使うときのベストプラクティス
WordPress に最適な Google Fonts を見つけてサイトに導入できるよう、次の3つのベストプラクティスに従いましょう。
1. 少ないほど良い：必要なフォントだけを使いましょう
ブランドアイデンティティに2～3種類を超えるフォントを使うことはおすすめしません。また、フォントのウェイトも必ず絞りましょう。最も人気があるのはレギュラーとボールドで、パフォーマンスの観点からは、極細から極太までのすべてのバリエーションをそろえる必要はありません。使われていないフォントのウェイトはすべて、Google のサーバーへのリクエストを遅くします。
2. 組み合わせ：フォント同士がよく合っているか確かめましょう
最適な Google Fonts のフォントを選んだうえで、もう1つ追加したい場合は、相性が良いかどうかを必ず確かめましょう。
- 異なるフォントを選びましょう（ただし、違いすぎないように）。言葉で説明するのは難しいので、代わりに画像をご覧ください。
情報の階層を意識し、タイトルには太くて大きいフォントを、段落には小さめのフォントを使いましょう。WP Rocket がフォントの組み合わせで視覚的な階層をどのように表現しているかは、次のとおりです。
- フォントを組み合わせるときの一般的なコツは、見出しにセリフ体、本文にサンセリフ体を使うことです。セリフ体のフォントを2つ一緒に使うと、テキストが読みにくくなります。詳しく知りたい場合は、Webflow がデザインの仕事で使える主なフォントの組み合わせを解説しています。
3. プラグインによる Google Fonts のインストール
お気に入りの Google Fonts のフォントを選んだら、タイポグラフィプラグインを使って WordPress サイトで利用できます。
最も人気があるのは無料の Google Fonts Typography プラグインで、WordPress サイトで Google Fonts のすべてのフォントを使えるようにしてくれます。フォントを組み合わせるときに便利なライブプレビュー機能も備えています。
タイポグラフィプラグインをインストールする前に知っておきたいポイント：Divi や Elementor などの人気のページビルダーでは、それぞれのビルダーの各要素で Google Fonts を使えます。また、ほとんどの WordPress テーマもコアで Google Fonts を利用しており、テーマのライブラリにあるフォントを使えるようになっています。
フォント選びのポイントがわかったところで、トップクラスの Google Fonts を見ていきましょう！
最も人気の高いおすすめの Google Fonts
WordPress サイトにおすすめの、最も人気の高い Google Fonts 11種類は次のとおりです。
- Roboto
- Open Sans
- Montserrat
- Lato
- Poppins
- Roboto Condensed
- Inter
- Roboto Mono
- Oswald
- Noto Sans
- Raleway
💡ヒント：このリストは、Google Fonts のウェブサイトでフォントを人気順に並べ替えれば、直接確認できます。
それでは、個人でも商用でも、あらゆるプロジェクトで使える（著作権フリーの）Google Fonts の中から、おすすめの無料の欧文フォントを順に見ていきましょう。
1. Roboto
Roboto は幾何学的でありながら、ところどころに親しみやすい開いた曲線も備えています。
- 使用しているウェブサイトの例：Roboto は、Android のほか、Google Play、YouTube、Google Maps、Google Images などの Google のサービスのデフォルトのフォントです。
- 使用しているウェブサイトの種類や業界：テクノロジー、ウェブアプリ。
2. Open Sans
すっきりとした非常に読みやすい見た目の、汎用性の高いフォントです。
- 使用しているウェブサイトの例：WordPress、Dolce & Gabbana、Ikea
- 使用しているウェブサイトの種類や業界：テクノロジーからファッションまで幅広く使える
3. Montserrat
アルゼンチン生まれのフォントで、ポスター、看板、ペイントされた窓から着想を得ています。
- 使用しているウェブサイトの例：hustlerblueprint.com
- 使用しているウェブサイトの種類や業界：上品で安定感のある Montserrat は、シンプルですっきりとした見た目のウェブデザインを作るのに最適です
4. Lato
2010年の夏にポーランドで制作が始まった、サンセリフ体のフォントファミリーです（「Lato」はポーランド語で「夏」を意味します）。
- 使用しているウェブサイトの例：Practical-ui.com
- 使用しているウェブサイトの種類や業界：非常に汎用性が高く、読みやすくてさまざまなスタイルがそろっているため、ウェブサイトに適したフォントです。印刷にも最適で、幾何学的なシンプルさと大きな x ハイトのおかげで、どこにでも使えます（x ハイトの大きい書体は、一般に視認性と可読性を高める目的でそのように作られています）。
5. Poppins
Poppins は幾何学的な形状によって小さなサイズでもコンテンツを読みやすく保ち、ヘッダーや大画面、モバイルデバイスで表示したときには、その曲線が力強く見えます。
- 使用しているウェブサイトの例：monday.com
- 使用しているウェブサイトの種類や業界：スタイル、明快さ、視認性が求められるウェブデザインや UI デザインに最適です。
6. Roboto Condensed
Roboto Font として知られる、最大の幾何学的サンセリフ書体ファミリーの一員です。「Condensed」は、幅が狭く背の高い文字を意味します。
- 使用しているウェブサイトの例：Nintendo Switch
- 使用しているウェブサイトの種類や業界：背の高い文字と詰まった文字間隔が視覚的な効果を生み、ウェブサイトを目立たせ、より印象に残るものにできます（キャッチコピーやメインタイトルに最適）。
7. Inter
コンピューターの画面向けに特別に設計された、もう1つのバリアブルフォントのファミリーです。その理由は、大文字と小文字が混在するテキストや小文字のテキストを読みやすくする、高い x ハイトにあります。
- 使用しているウェブサイトの例：Jetpack
- 使用しているウェブサイトの種類や業界：小さなデバイスでもコンテンツが確実に読みやすくなるため、レスポンシブデザインに最適です。
8. Roboto Mono
Roboto Mono は、Roboto の書体ファミリーに加わった等幅フォントです。
- 使用しているウェブサイトの例：Google のアプリケーションと同じフォントファミリー。
- 使用しているウェブサイトの種類や業界：読みやすさとレスポンシブデザインに最適化されたフォントです。プログラミング用途にも優れています。「オタクっぽい」フォントです。
9. Oswald
歴史的に「Alternate Gothic」のサンセリフ書体に代表されるクラシックなスタイルを、デザインし直したフォントです。
- 使用しているウェブサイトの例：secupress.me
- 使用しているウェブサイトの種類や業界：縦長の形状なので、フォントの組み合わせに必ずコントラストをもたらし、ロゴのデザインに最適です。
10. Noto Sans
すっきりとした装飾のないデザインで、ニュートラルな雰囲気はオンラインで読む文章に最適です。ほかのフォントとの組み合わせにおいても、特に優れたフォントの1つです。
- 使用しているウェブサイトの例：dimano.rs
- 使用しているウェブサイトの種類や業界：商品説明や短いテキストに最適です。
11. Raleway
細いウェイトを持つ、細身で上品なフォントです。有名な「W」の字形が、このフォントをひときわ目立たせています。
- 使用しているウェブサイトの例：Storespark.co
- 使用しているウェブサイトの種類や業界：見出しや小見出し、さらには本文にも最適で、上品な印象を与えます。
おすすめの Google Fonts を確認したところで、WordPress サイトの表示を遅くしないように最適化する方法を見ていきましょう。
Google Fonts を最適化する方法
WordPress で Google Fonts を最適化する最善の方法は、パフォーマンスプラグインを使うことです。
ただし、最適化のテクニックに入る前に、次のような流れで最適化を進めることをおすすめします。
- Google Fonts とパフォーマンスの関係を理解しましょう。
- PageSpeed Insights で WordPress サイトを監査し、フォントとパフォーマンスについてウェブサイトがどのような状態にあるかを確認しましょう。
- 最適化が必要なフォントを、手動またはパフォーマンスプラグインで最適化しましょう。
フォントを完全に最適化するための主なステップを見ていきましょう。
ステップ 1：Google Fonts の最適化がパフォーマンスにとって重要な理由
Google Fonts は容量の大きいファイルで読み込みに時間がかかることが多く、体感的なパフォーマンスとユーザーエクスペリエンスに影響します。Core Web Vitals が影響を受けることもあり、その場合は検索順位にも影響が出る可能性があります。最適化されていないフォントがパフォーマンスにどのような影響を与えるかを、以下で説明します。
- ウェブサイトの低速化：最適化されていない Google Fonts は、ウェブサイトのパフォーマンスとページの読み込み速度に悪影響を与えることがあります。フォントの最適化は画像の最適化ほど重要ではないかもしれませんが、WordPress サイトがリクエストを1つ送るたびに、ユーザーがページを目にするまでの待ち時間が長くなることを覚えておきましょう。
- Largest Contentful Paint（LCP）：ページのメインコンテンツの読み込みが完了した時点を算出します。LCP がテキストの場合は、フォントができるだけ速くダウンロードされ、描画されるようにする必要があります。
- First Contentful Paint（FCP）：ページの読み込みのタイムラインで、ユーザーが何かを目にできる最初の時点を示すため、ページの体感速度を測定する指標です。そのため、ウェブフォントが読み込まれていないと、ブラウザは通常テキストの描画を遅らせ、FCP のスコアが悪くなります。反対に、FCP が優れていれば、画面上で何かが起きていることが訪問者に伝わって安心感を与え、訪問者は待ってくれる可能性が高くなります。
- Cumulative Layout Shift（CLS）：ページの視覚的な安定性を測定します。最適化されていないウェブフォントは、その読み込み中に、フォントを使っているテキストと周囲のコンテンツがずれることがあるため、CLS のスコアに悪影響を与える可能性があります。
📖 Core Web Vitals を向上させ、WordPress サイトのパフォーマンスを改善したいですか？専用のガイドで SEO を強化し、Core Web Vitals を改善するための16のヒントを紹介していますので、ぜひお読みください。
最適化が不十分な Google Fonts がパフォーマンスと SEO に与える影響がわかったところで、Lighthouse を使ってご自身で監査を実施するとよいでしょう。
ステップ 2：PageSpeed Insights での Google Fonts の診断
Google Fonts のフォントをインストールしたら、PageSpeed Insights でパフォーマンス監査を実施することをおすすめします。レポートでは、Lighthouse がウェブフォントの最適化のベストプラクティスに沿っているかどうかを確認します。一般に、フォントが最適化されていない場合は、次の5つの警告が表示される可能性が高くなります。
上記の5つの問題はページの表示速度に直接影響するため、パフォーマンスの低下を避けるには、できるだけ早く修正するとよいでしょう。
ステップ 3：Google Fonts を最適化しましょう
ウェブデザインのプロジェクトに最適な Google Fonts を選んだら、手動で最適化することも、次のようなプラグインやツールで最適化することもできます。
- WP Rocket：Google Fonts を自動で最適化します。
- OMGF：キャッシュによって DNS ルックアップを減らし、Cumulative Layout Shift のスコアを下げます。フォントのプリロードや、ウェブサイトで使っていないフォントのアンロードを選べます。
- Google Fonts Typography：WordPress サイトに任意の Google Fonts のフォントを読み込めます。preconnect のリソースヒントもいくつか提供しています。
よくある質問
Google Fonts とは何ですか？
Google Fonts は、オンラインでもオフラインでも、あらゆるプロジェクトに使えるウェブフォントの充実したコレクションです。無料のオープンソースで、ディレクトリの検索ボックスとさまざまなフィルターを使ってフォントを探せます。Google のコンテンツデリバリーネットワーク（CDN）から取得されるため、通常はパフォーマンスにそれほど影響しません。
Google Fonts は商用利用できますか？
はい、Google Fonts は無料のオープンソースなので、商用利用できます。ロゴ、印刷物、アプリ、教材、電子書籍などに使え、追加のライセンス料金はかかりません。この記事で紹介している11種類のフォントも、個人と商用のあらゆるプロジェクトに無料で使えます。
WordPress での Google Fonts の使い方は？
WordPress で Google Fonts を使うには、Google Fonts のディレクトリでフォントを選び、タイポグラフィプラグインを使ってサイトに導入する方法があります。最も人気があるのは無料の Google Fonts Typography プラグインで、フォントを組み合わせるときに便利なライブプレビュー機能も備えています。なお、Divi や Elementor などの人気のページビルダーや、ほとんどの WordPress テーマでも Google Fonts を使えるようになっています。
ウェブサイトにおすすめの英語フォントは？
Google Fonts の中で特に人気が高く、ウェブサイトにおすすめの欧文フォントは、Roboto、Open Sans、Montserrat、Lato、Poppins などです。この記事では、これに Roboto Condensed、Inter、Roboto Mono、Oswald、Noto Sans、Raleway を加えた11種類を紹介しており、どれも個人と商用のプロジェクトに無料で使えます。たとえば、Roboto はテクノロジー系のサイトやウェブアプリで使われており、Open Sans はテクノロジーからファッションまで幅広く使え、Oswald はロゴのデザインに最適です。
Google Fonts を使うとサイトは遅くなりますか？
最適化されていない Google Fonts は、サイトの表示を遅くすることがあります。Google Fonts は Google の CDN から取得されるため、通常はパフォーマンスにそれほど影響しませんが、容量の大きいファイルで読み込みに時間がかかることも多く、Core Web Vitals に影響する場合があります。また、使われていないフォントのウェイトは、Google のサーバーへのリクエストを遅くします。PageSpeed Insights で診断したうえで、手動またはパフォーマンスプラグインでフォントを最適化しましょう。
まとめ
1,400種類を超えるフォントを手作業で見て回ることもできますが、貴重な時間を節約して、このガイドを参考に次のプロジェクトに最適な Google Fonts を選ぶこともできます！フォントはブランドの個性に合っていなければならないことを覚えておきましょう。セリフ体は、上品で洗練されたイメージを打ち出したいブランドに人気があります。反対に、よりモダンで尖ったイメージを伝えたいなら、サンセリフ体が定番の選択肢です。
鉄則は、フォントを使いすぎないことと、できる限り最適化することです。最適化されていないフォントを配信すると、テキストの描画の遅れと大きなレイアウトシフトによって、パフォーマンスとユーザーエクスペリエンスの両方に影響が出ます。このルールを心に留めて、ウェブサイトに最適なフォントを選びましょう！
