本稿執筆時点で1,052種類のGoogleフォントファミリーが、無料で利用できます。これは膨大な数の中からベストなGoogleフォントのリストを見つけるのは、干し草の中から針を見つけるようなもので、誰かの手助けが必要でしょう。
そこで、私たちはベストなGoogleフォントのリストを選出しました。あわせて、WordPressでGoogleフォントを使用する際のベストプラクティスもご紹介します。
フォントの選択は、単なるデザインの問題ではありません。サイトの直帰率やコンバージョン率に大きな影響を与える可能性があります。そのため、最初に見つけたフォントをそのまま使うのではなく、少し時間をかけて、自分のウェブサイトに最適なGoogleフォントファミリーを選択することが大切です。
もっと多くのフォントが必要な場合は、こちらの記事「WordPressウェブサイトで利用可能なモダンフォント50選」もご覧ください。
なぜGoogleフォントを使うのか？
インターネット上には何千ものフォントリポジトリがありますが、Googleフォントは、何が特別なのでしょうか？
まず第一に、無料です。その上、GoogleフォントはGoogleによって管理、配信されているため、安全性が保証されています。フリーフォントをダウンロードできる怪しいサイトはたくさんありますが、フォントファイル以外に何を仕込まれるかは誰にもわかりません。
また、こうしたサイトでは、フォントの質にも問題がある場合があります。
Googleは、1,000以上の高品質なフォントを厳選しています。タイポグラフィによほどこだわるグラフィックデザイナーでなければ、安全な選択と言えるでしょう。
第二に、複雑なライセンス制限がありません。Googleフォントカタログに掲載されているすべてのフォントはオープンソースで、商用プロジェクトでも自由に使用できます。サイトにダウンロードしたり、埋め込んだりすることができ、印刷プロジェクトでも使用できます。
Googleフォントに統一されたライセンスはありませんが、リポジトリにあるほとんどのフォントはOpen Font Licenseを使用しています。
他の「フリーフォント」は、滅多に「フリー」でなく、一歩間違えると大変なことになる、紛らわしいライセンス制限が付いています。一方、Googleフォントにそのような問題はありません。
最後に、Googleフォントは、Google Fonts APIを使用してウェブサイトに簡単に追加できます。また、個別にダウンロードして、ウェブサーバーにFTP/SFTPを使用してアップロードすることもできます。
Googleフォントはシンプルなデザインのものが多く、有料フォントのような派手さはないかもしれませんが、主要なOSにプリインストールされているウェブセーフフォントや、誰もが何千回も見たことがあるような一般的なフォントに比べれば、確実に勝っているフォントでしょう。
Googleフォントを選ぶ際のポイント
ウェブサイトをデザインする際に学ぶべきことが1つあるとすれば、それはプロジェクトに適したGoogleフォントの選び方です。優れたタイポグラフィは、サイトの印象を左右します。
些細なことに思えるかもしれませんが、読者やお客様が、サイトからすぐに離脱するか、常連として定着してくれるかの分かれ目になり得ます。
適切なフォントの選択は、グラフィックデザイナーが何年もかけて習得するものですが、いくつかの原則を心に留めるだけでも、ウェブサイトに美しいフォントを選択できます。
- ブランドとの適合性：これが最も重要な点かもしれません。最高のウェブサイトには、そのブランドの個性を示すと同時に、読みやすく、現在のデザインに調和したフォントが使われています。例えば、Appleとアイアン・メイデンでは、使用しているフォントに大きな違いがありますが、どちらもブランドに適合しています。
- 読みやすさ：2番目に重要な原則は、可読性です。ファンタジー系のフォントやグランジ系のフォントはブランドに合っていたとしても、訪問者が読めなければ、すぐに離脱されてしまいます。フォントはプロフェッショナルで読みやすいものでなければなりません。
- フォントの分類：フォントを分類する方法は何百通りもありますが、主なタイプは次の5つです：セリフ体、サンセリフ体、スクリプト体、等幅体、装飾体。スクリプト体やセリフ体のフォントはエレガントな印象を与え、等幅体フォントは技術系のサイトで人気があります。この分類を知っておくと、検索の良い出発点になるでしょう。
- ディスプレイフォントとボディフォント：ディスプレイフォントは、大きなサイズやヘッダー、印刷用のフォントです。デザインのユニークさが重要で、そのためには読みにくくても構いません。ボディフォントは、サイトの大部分を占めるため、読みやすさをメインに考えます。
- ムードと意図：他の芸術作品と同様に、フォントアーティストは、特定のムードや設定のためにフォントをデザインします。ほとんどのフォントには、どのような意図でデザインされたのか、どのような目的で使用できるのかというメモが付いています。それらを参考にして、自分のプロジェクトにフォントが適しているかどうかを判断しましょう。
Googleフォントベスト10 2024年版（集合知による）
主観的な要素が多い中、どうやってベストなGoogleフォントのリストを作成すればよいでしょうか？偏ったリストにはしたくないため、データに基づいて最も人気のあるGoogleフォントのリストを作成することにしました。
Google Fonts Analyticsを利用して、集合知を信じることにします。50兆を超えるフォントの総閲覧数に対して、Googleはわずかなデータしか取得していませんが…。
そして、単純な数字だけではなく、最近人気の比較的新しいHTMLフォントも選んでみます。
準備はいいですか？では、行きましょう。
1. Roboto
長く1位の座をキープしており、Kinstaもお勧めのフォント「Roboto」は、Christian Robertson氏によるサンセリフ体です。Googleが、Androidのシステムフォントとして開発しました。現在も非常に人気で、フォントには12種類のスタイルがありますが、複数個がGoogle Fonts Analyticsに登場します。
例えば、最も人気のあるフォントは「Roboto」ですが、「Roboto Condensed」は6番目に人気のあるフォントです。「Roboto Slab」も12番目に登場します。
2. Open Sans
Open Sansは、非常に可読性に優れたフォントです。Googleに委託され、前身のフォントDroid Sansの影響を受けています。Googleは一部のウェブサイトや印刷物、ウェブ広告にOpen Sansを使用しています。姉妹フォントであるOpen Sans Condensedも、Googleフォントで13位の人気です。
3. Lato
Latoは、Łukasz Dziedzic氏による人気のフォントです。フォントのデザインにはしっかりしたストーリーがあり、相反する目標を両立し、ユニークで、軽量なサンセリフ体フォントを実現しています。
4. Montserrat
Montserratは、ブエノスアイレスの同名のMontserrat地区に住む、Julieta Ulanovsky氏によるサンセリフ体フォントです。選択の幅が非常に広く、ライトなものからヘビーなものまで、18種類のスタイルが用意されています。
5. Oswald
Oswaldは、Vernon Adams氏によって開発されたサンセリフ体のフォントです。オルタネイトゴシックスタイルを意識してデザインされており、太いストロークが特徴です。
6. Source Sans Pro
Source Sans Proは、Adobeのために作成されたサンセリフ体のフォントで、Adobe初のオープンソースフォントです。Paul Hunt氏作のこのフォントは、軽快なレタリングで、すっきりした読みやすさを実現します。
7. Slabo 27px/13px
Slaboは、Tiro TypeworksのJohn Hudson氏によって開発されたセリフ体のフォントです。このフォントは、ニーズに応じて、27pxまたは13pxの特定のサイズに特化して設計されています。
8. Raleway
Ralewayは18種類のスタイルを持つ大きなファミリーのサンセリフ体フォントです。元々はMatt McInerney氏によって作成されました。Ralewayが好きで、少しユニークなものが必要であれば、Raleway Dotsがあります。同様のスタイルで、大きな見出しに対応するドットアプローチを提供します。
9. PT Sans
PT Sansは、ロシア連邦の公共タイプ用に開発されたフォントのため、ラテン文字とキリル文字の両方が含まれています。PTファミリーには他にもいくつかのフォントがあり、セリフ体のオプションもあります。
10. Merriweather
Merriweatherの名前は、心地よいデザインを連想させますが、まさにデザイナーの意図はそこにあります。それほど有名ではありませんが、姉妹プロジェクトのMerriweather Sansは、非常に相性の良いフォントです。
ボーナスフォント+最近人気のフォント
数字上は、この10種類のフォントが最も人気のGoogleフォントです。しかし、数字だけで人気を見ていると、Google Fonts Analyticsではまだ上位に来ていない、新しく優れたフォントを見落としてしまいます。
ここで、Google Fonts Analyticsのトップ10リストに登場しない、私たちのお気に入りのフォントをご紹介します。
11. Noto Sans / Serif
NotoはGoogleに委託されたフォントで、セリフ体とサンセリフ体の両方があります。定期的にアップデートされていて、現在では100種類以上のNotoフォントがあり、さらに増え続けています。
Notoの目標は、様々な言語のアルファベットや文字をすべてカバーすることにあります。独特のデザインは、何百もの異なるフォントファミリーで調和します。派生したフォントには、人気のNoto Sans KRやNoto Sans JPがあります。
12. Nunito Sans
Nunito Sansは、人気上昇中のサンセリフ体のフォントです。2018年から2019年の間に利用は3倍になり、年々人気が高まっています。
13. Concert One
Concert Oneは丸みを帯びた、グロテスクサンセリフ体のフォントで、ヘッドラインに最適な書体です。型破りなデザインは人目を引くこと間違いありません。
14. Prompt
Promptは、タイのコミュニケーションデザイン会社Cadson Demakが提供するサンセリフ体です。ループレス（タイ語のサンセリフ体に相当）で、タイ語とラテン語の文字が含まれています。
15. Work Sans
Work Sansは、スクリーンでの使用に最適化されたサンセリフ体のフォントです。フォントデザイナーの推奨は、14px～48pxのミドルウェイトスタイルです。
Googleフォントの最適な組み合わせを作成する
Googleフォントから1種類のフォントだけを選ぶのは難しく、サイトで複数のフォントを組み合わせようと考えているならちょっと待ってください。幸いなことに、この問題を自分で解決する必要はありません（解決したいなら別ですが）。最高のGoogleフォントの組み合わせを得る方法にはいくつかあります。
まず、Googleフォントのサイト自体が、ページをスクロールしていくと、人気のあるフォントの組み合わせを提案します。
また、Font Pairのようなサイトでも多くのアイデアを得られます。
WordPress上でGoogleフォントを使用する際のベストプラクティス
プロジェクトに最適なフォントが見つかりましたか？以下では、WordPressでGoogleフォントを使用する際のベストプラクティスをご紹介します。
使用するフォントウエイトの数を制限する
MontserratやRalewayのように、フォントの中には18種類のフォントウェイトが用意されているものもあります。選択肢が増えるのは良いことですが、WordPressサイトで18種類のウェイトをすべて読み込み、サイトの速度を遅くはしたくないでしょう。
以下は非常に重要なガイドラインです。
ほとんどのフォントでは、最大で3つのウェイトの使用が目安です。
- Regular（標準）
- Italic（斜体）
- Bold（太字）
最近のWordPressサイトでは斜体を省略して、2種類のフォントウェイトのみを使用している場合も多くあります。
Googleフォントを自分で埋め込む場合、どのウェイトを含めるかを正確に選択できます。これにはフォントのページにアクセスして、必要なフォントの横にある「このスタイルを選択」をクリックします。
現在、ほとんどのWordPressテーマでは、使用するGoogleフォントとウェイトを簡単に選択できます。しかし、すべてのテーマ開発者がパフォーマンスを重視しているわけではありません。場合によっては、テーマ側でのGoogleフォントを無効にして、自分で追加したほうが良い場合もあります。
また、バリアブルフォントも普及し始めており、すべてのモダンブラウザでサポートされています。バリアブルフォントは、ひとつのフォントファイルを異なるプロパティで変形させられる素晴らしい技術です。Googleフォントにも多くのバリアブルフォントが用意されていて、それらに絞って検索することもできます。
Googleフォントのローカルでのホスティングの検討
Googleのサーバーからフォントを提供する代わりに、ローカルでフォントをホスティングして、パフォーマンスを向上できます。ただし、恐らくはほとんどのGoogleフォントは、すでにユーザーのブラウザにキャッシュされています。このため、事前にパフォーマンステストを行うことをお勧めします。
Googleフォント以外のプレミアムフォント、たとえばKinstaサイトで使用している「Brandon」フォントなどを使用する場合は、ローカルのホスティングと、CDNの利用が最適な方法です。このトピックの詳細については、フォントをローカルにホスティングする方法に関するこちらの記事をご覧ください。
更新が行われているフォントを選択する
WordPressのプラグインやテーマと同じように、フォントも時間の経過とともにアップデートや改良が加えられ、より良いものになっていきます。WordPressのプラグインほど切迫する危険はありませんが、定期的にアップデートされているフォントを選ぶことは有益です。例えば、GoogleのNotoファミリーは、2014年から定期的にアップデートされています。
このリストに掲載したほとんどのフォントは人気があるため、定期的に更新され、改良されることは間違いないでしょう。もしも、リストに掲載されていないフォントを使う場合は、注目され、人気のあるフォントを選んでください。
アクセシビリティを忘れない
世界保健機関（WHO）の2015年に収集されたデータによると、推定2億5300万人が視覚障害を抱えて生活しています。このうち3,600万人が失明しており、2億1,700万人が中等度から重度の視覚障害を抱えています。また、何らかの障害を持つ人の数は、2024年時点で22億人に上っています。
Googleフォントを使用する場合、CSSで色やサイズなどの見た目をコントロールします。このとき、誰もが簡単にアクセスできるコンテンツになるよう、ウェブコンテンツアクセシビリティガイドライン（WCAG）2.0に従ってください。
このガイドラインに従うことで、視覚障害や弱視、聴覚障害や難聴、学習障害、認知障害、運動制限、言語障害、光線過敏症、およびこれらの組み合わせを含む、より幅広い障害者がコンテンツにアクセスできるようになります。─ウェブコンテンツアクセシビリティガイドライン（WCAG）2.0
重要なガイドラインのひとつに、色のコントラストがあります。Kinstaのウェブサイトの以前のデザインでは、フォントが少し薄すぎたため、訪問者から「読みにくい」という声が上がっていました。せっかく素晴らしいコンテンツを公開しても、目が疲れてしまっては元も子もありません。
WebAIMのColor Contrast Checkerのようなツールを使用して、フォントの色が公式の推奨事項を満たしているかどうかを確認できます。例えば、現在のKinstaブログ記事の色は、このテストに合格します。👍
WordPressにGoogleフォントを追加する方法
フォントを選んだら、最後のステップはウェブサイトへの追加です。Googleフォントのおかげで、この作業は簡単になりました。
フォントを自分のウェブサイトに取り込むには、3つの方法があります。Easy Google FontsやGoogle Fonts Typographyなどのプラグインをインストールする方法、Google Fonts APIを使用してフォントをサイトにアップロードする方法、手動でフォントをダウンロードしてウェブサイトでホスティングする方法の3つです。
WordPressでフォントを変更するための詳細なガイドを作成しましたので、お読みください。
まとめ
Googleフォントは素晴らしく、何百万ものウェブサイトで使用されています。堅実なタイポグラフィとアイコノグラフィの原則によって、ウェブをより快適に、オープンに、迅速に、アクセスしやすくしています。
より良いユーザー体験を生み出すには、フォントのベストプラクティスに従うことをお勧めします。フォントのウェイトを制限し、必要に応じてフォントをローカルにホスティングし、アクセシビリティのガイドラインを遵守してください。
次はあなたの番です。あなたのお気に入りのGoogleフォントとフォントのペアを以下のコメントで教えてください。また、WordPressのフォントについての詳細なガイドもぜひご覧ください。
コメントを残す