本稿執筆の時点では、無料で利用可能なGoogleフォントファミリーが884種類あります。選択肢が多いですね!数多くのフォントの中の最高のものをお探しのあなたなら本記事を是非ご確認ください。

最高のフォントの並びにWordPressでGoogleフォントを使用するためのベストプラクティスさえご紹介します。

フォントを選択することは美的選択だけではありません。特に、読みにくいフォントを選択してしまう場合、ウェブサイトの直帰率またはコンバージョン率への実際の影響を及ぼすことがあります。

基本的には、最初のフォントを使用するのではなく、ウェブサイトに最適なGoogleフォントファミリーを選択するのに少し時間をかける価値があります。

群衆の知恵に基づく2019年のGoogleフォントのトップテン

さて、好みにもよるもののGoogleフォントのリストをどう作成すれば良いのでしょうか。このリストを完全に主観的なものにするのを避けたく、データに基づいて最高のGoogleフォントのリストを作成します

基本的には、Google Fontsの分析データを使用し、大衆の知恵を信頼します。フォントビュー数が23兆を超えているGoogleには、役に立ちそうなデータが少しあります。😉

その次に、人気ものの並びに、急速に成長してきている注目すべき新しいフォントもご紹介します。それでは…

1. Roboto

GoogleフォントRoboto

GoogleフォントRoboto

RobotoはChristian Robertsonによるサンセリフ製品で、GoogleがAndroidのシステムフォントとして開発したものです。最近、非常に人気になり12種類のスタイルもあります。Google Fontsの分析データにも何回も出現します。たとえば、Robotoは最も人気のあるフォントですが、Roboto Condensedは6番目に人気のあるフォントで、Roboto Slabは13番目です!

2. Open Sans

GoogleフォントOpen Sans

GoogleフォントOpen Sans

Open SansはSteve Mattesonにより開発されたサンセリフフォントです。Open SansがGoogleのウェブサイトの一部または印刷広告書類とウェブ広告で使用されます。

3. Lato

GoogleフォントLato

GoogleフォントLato

LatoはŁukasz Dziedzicによる人気のあるサンセリフ製品です。

4. Slabo 27px/13px

GoogleフォントSlabo

GoogleフォントSlabo

SlaboはTiro TypeworksのJohn Hudsonにより開発されたセリフフォントです。このフォントのユニークな点は、特定のサイズ(必要に応じて27pxまたは13px)で使用できるように設計されていることです。

5. Oswald

GoogleフォントOswald

GoogleフォントOswald

Oswaldは、もともとVernon Adamsにより開発されたサンセリフフォントです。

6. Source Sans Pro

GoogleフォントSource Sans Pro

GoogleフォントSource Sans Pro

Source Sans Proは、Paul HuntがAdobe向けに作成されたサンセリフフォントです。Adobeの最初のオープンソースフォントです。

7. Montserrat

GoogleフォントMontserrat

GoogleフォントMontserrat

Montserratは、名祖のブエノスアイレスのモントセラトに住んでいるJulieta Ulanovskyによるサンセリフのフォントです。スタイルが18種類もある為、かなりの選択肢があります。

8. Raleway

GoogleフォントRaleway

GoogleフォントRaleway

Ralewayは、もともとMatt McInerneyにより作成されたスタイルの18種類もある幅広いサンセリフのフォントファミリーです。Ralewayのお好みの方には、Raleway Dotsもお勧めします。似たようなスタイリングですが、点で書いているフォントで、ヘッドラインにピッタリです。

9. PT Sans

GoogleフォントPT Sans

GoogleフォントPT Sans

PT Sansは、ロシア連邦のために開発されたもので、アルファベットとキリル文字の両方を含みます。PTファミリーにはセリフのおプシンも含むフォントが他にもたくさんあります。

10. Lora

GoogleフォントLora

GoogleフォントLora

Loraは人気のあるセリフフォントで、画面と印刷の両方で読みやすいように設計されています。

ボーナスフォント+ 急速に成長してきている新しいフォント

数値だけをみると、上記の10種類のフォントが最も人気のあるGoogleフォントです。しかし、最も人気のあるフォントのみをご紹介することにより、まだ広く知られていない新しいフォントがかわいそうですね。

次に、分析データのトップに登場しなかった当社のスタッフの好きなフォントのいくつかをご紹介します。

11. Noto Sans / Serif

GoogleフォントNoto Sans

GoogleフォントNoto Sans

NotoはGoogleが委託したフォントで、セリフとサンセリフの両方のバージョンがあります。定期的に更新されるNotoには現在、フォントが100種類以上もあります!

12. Nunito Sans

GoogleフォントNunito Sans

GoogleフォントNunito Sans

Nunito Sansはの使用回数が急速に増えているサンセリフフォントです(使用回数は昨年より3倍になりました)。

13. Concert One

GoogleフォントConcert One

GoogleフォントConcert One

Concert Oneは、ヘッドラインにピッタリ、丸くてグロテスクな書体です。

14. Prompt

GoogleフォントPrompt

GoogleフォントPrompt

Promptは、タイのコミュニケーションデザイン会社であるCadson Demakによるサンセリフ製品です。

15. Work Sans

GoogleフォントWork Sans

GoogleフォントWork Sans

Work Sansはスクリーン上で使用するために最適化されたサンセリフフォントです。設計者は14px~48pxを対象にミックスウェイトスタイルを使用することを推奨しています。

最高のGoogleフォントの組み合わせを作成する方法について

1種類のGoogleフォントを選択するのも大変ですが、ウェブサイトのフォントの組み合わせを決定するのはさらに難しいです!ありがたいことに、一人で決めなくてもいいです。最高のGoogleフォントの組み合わせを考え出すには、いい方法がいくつかあります。

まず、Google Fontsウェブサイト自体をスクロールダウンすると、人気のある組み合わせが表示されます:

Google Fontsの組み合わせの場所

Google Fontsの組み合わせの場所

または、Font Pairなどのウェブサイトを使用することによりもさらなる推進事項が出てきます。

WordPressでGoogleフォントを使用するためのベストプラクティス

Google Fontsの完璧なフォントを見つけたら、WordPressでそのGoogleフォントを使用するためのベストプラクティスもご紹介します。

ご利用のフォントウェイトの数を制限する

Montserrat及びRalewayなどのフォントには、18種類のフォントウェイトもあります。選択肢が多くて確かに良いことですが、WordPressウェブサイトの読み込み時間が悪化するため、18種類のウェイトをすべて加えない方がいいです。これはとても重要です!

ほとんどのフォントでは、原則として最大3種類のウェイトを使用することをお勧めします:

ダウンタイムまたはWordPressの異常に悩んでいますか。Kinstaは時間を節約するために設計されたホスティングソリューションです!当社のフィーチャーをご確認ください。
  • レギュラー体
  • イタリック体
  • ボールド体

今日、WordPressウェブサイトの多くでは、イタリック体が全くなく、2種類のフォントウェイトしか使用されません。Google Fontsを自分で埋め込んでいる場合は、Google Fontsの「カスタマイズ」タブで使用するウェイトを選択できます:

Googleフォントのスタイルの選択方法

Googleフォントのスタイルの選択方法

現在、ほとんどのWordPressテーマには、使用するGoogleフォントとウェイトが含まれています。しかし、テーマの開発者が必ずしもパフォーマンスに集中しているわけではありません。したがって場合により、テーマでGoogleフォントを無効にし、自分で追加した方がいい場合があります。

または、可変フォントも普及しはじめ、最新のブラウザのすべてでサポートされています。1つのフォントファイルが各プロパティと一緒に変換できるため、素晴らしいものです。ただし、まだ無料のフォントがあまり用意されていません。一方、GoogleのEarly Accessには可変フォントもいくつかあります。

Googleフォントをローカルにホストすることを検討する

Googleのサーバーからフォントを提供するのではなく、フォントをローカルでホストすることもできます。これにより、パフォーマンスが向上することがあります。一方、ほとんどのGoogleフォントは既に訪問者のブラウザにキャッシュされている可能性が高いですので、ご注意ください。独自のパフォーマンステストを行うことをおすすめします。

Kinstaのウェブサイトでも使用しているBrandonフォントなどのGoogleフォント以外のプレミアムフォントをご使用の場合は、ローカルにホストする(そしてCDNから提供する)ことが最善の方法です。本件の詳細については、当社のフォントをローカルにホストする方法についての記事をご参照ください。

更新されるフォントを選択くする

WordPressのプラグイン及びテーマと同様に、フォントは時間が経つと更新かつ改善されるものです。なお、リスクはWordPressのプラグインほど深刻ではありませんが、定期的なアップデートのあるフォントを選択する価値があるでしょう。例えば、GoogleのNotoファミリーは、2014年以降定期的に更新されています。

本リストに載っているフォントの大半は人気があるため、上記のすべてのフォントが定期的に更新かつ改善される可能性は高いでしょう。本リスト以外のフォントを選択しても、更新されるほどの人気のあるものにした方が良いでしょう。

アクセシビリティに注意する

世界保健機関(WHO)によると、2017年現在、視力障害の人数は約2億5300万人です。そのうち、3600万人が盲人であり、2億1700万人が弱視者です。

Googleフォントを使用しているときは、その色やサイズなど、CSSでの表示の形が設定できます。したがって、Web Content Accessibility Guidelines (WCAG) 2.0(ウェブコンテンツアクセシビリティガイドライン)に従うことをご注意ください。これにより、誰でもそのコンテンツにアクセスできるようになります。

アクセシビリティは、視覚、聴覚、身体、発話、認知、言語、学習、神経の障害を含む、広範な障害に関係している。このガイドラインは、広範囲に及ぶ事項を網羅しているが、障害のすべての種類、程度、組合せからくるニーズを満たすことはできない。

例えば、色のコントラストは非常に重要なガイドラインです。Kinstaのウェブサイトの古いデザインでは、フォントはあまりにも薄すぎて、読みにくかったです。最高のコンテンツを書いているのに読者が読めないことこそは好ましくないですね!

WebAIMのColor Contrast Checkerのようなツールを使用することにより、フォントの色が推奨事項に合格しているかどうかが確認できます。以下は、本記事の色がテストに合格した画面です。👍

色のコントラストの確認ツール

色のコントラストの確認ツール

あなたのお気に入りのGoogle Fontsのフォントは何ですか?

Googleフォントは何百万のウェブサイトで使用されているすばらしいものです。フォントウェイトを制限すること、(場合により)ローカルにホストすること、アクセシビリティのガイドラインに従うことなどのベストプラクティスに従うことにより、訪問者にとってより良いユーザーエクスペリエンスを提供できます。

そこで、あなたのお気に入りのGoogle Fontsのフォントとフォントの組み合わせは何ですか。コメントを書いてご意見をお寄せください。