Google フォントを WordPress に追加する方法

Web サイトのデザインと専門性を劇的に向上させる 1 つの方法は、優れたフォントを使用することです。

ほとんどの人は、自分の Web サイトで使用するフォントについて深く考えたことはありません。ただし、独自のテーマを開発している場合、または現在インストールされているテーマを編集している場合は、適切なフォントの選択がプロセスの大部分を占める必要があります。

Web サイト用のフォントまたはフォントの組み合わせを選択することは、これまでは単純で、率直に言って非常に退屈な作業でした。以前は使用できる Web セーフフォントはほとんどありませんでしたが、現在では膨大な数の Web に最適化されたフォントが継続的に作成されているため、どれを使用すればよいかを判断するのが難しい場合があります。

Google フォントの作成と 900 以上のフォントファミリーが利用できるようになったことで、適切なフォントを選択するプロセスはさらに複雑になりました。しかし、ここ数年間の Google Fonts の開発により、あらゆる選択をこれまでよりもはるかに簡単に実装できるようになりました。

Google フォントを使用する必要があるのはなぜですか?

Google Fonts は、今日ウェブ上で利用できる最大のフォントリソースの 1 つになりました。

900 以上のフォントファミリを使用できるだけでなく、それらはすべてオープンソースフォントであり、誰でも作成および拡張できます。

フォントを作成するデザイナーは、そのフォントを Google のディレクトリに含めるための検討プロセスを経る必要があります。つまり、世界中の何千人ものデザイナーにアクセスできるだけでなく、フォントが完全で Web に最適化されていることを最初に確認しない限り、フォントをディレクトリに追加することはできません。

これまでさまざまなフォントを使用する場合、ブラウザで適切に表示できるようにするには、そのフォントを自分のコンピュータにインストールする必要がありました。 Google フォントを使用すると、すべてのフォントが Google ディレクトリから直接アクセスされ、実質的にどのマシンでもどのブラウザでも動作することが保証されます。これにより、Web サイト開発において、これまでにないデザインの自由度が広がります。

ウェブサイトで Google フォントを使用するにはどうすればよいですか?

Total WordPress テーマなどの一部の WordPress テーマには、Google フォントを簡単に変更するためのオプションがテーマに組み込まれています。 カスタマイザーに移動し、タイポグラフィタブをクリックするだけで、テーマ全体の要素のメインフォント、フォントサイズ、フォントの太さ、均等な行間隔を編集できます。

ただし、別のテーマを使用している場合は、Google Fonts を手動で追加するか、プラグインを使用できます。

Google フォントを追加するための WordPress プラグイン

Google Fonts をサイトに追加するための最良の無料プラグインの 1 つは、WordPress リポジトリからダウンロードできる無料の Easy Google Fonts プラグインを使用することです。ただし、WordPress ダッシュボードから直接ダウンロードするのが最も簡単です。 WordPress サイトにログインし、[プラグイン] > [新規追加] に移動するだけです。次に、「Easy Google Fonts」を検索するだけで、すばやく簡単にインストールできます。

サイト上のフォントをカスタマイズするためのもう 1 つの優れたプラグインは、Yellow Pencil Live CSS エディタープラグイン (New York WordPress テーマに無料で含まれています) です。このプラグインの利点は、クリックして編集する簡単な方法で Web サイトのフォントを変更できるだけではないことです。 WordPress テーマの色、フォントサイズ、フォントの太さ、パディング、余白などをすべてカスタマイズすることもできます。

どのフォントを使用すればよいですか?

Google Fonts Directory の最大の強みは、作業を困難にする可能性もあります。使用できるフォントの数が非常に多いため、適切なフォントの組み合わせを見つけて選択するのは困難な場合があります。

選択するフォントは、デザインで何を伝えようとしているかによって決まります。フォントは、サイトの読者の興味を引くために使用されます。これらは、Web サイトのさまざまな側面に注意を引くために使用され、優れたデザイナーは、使用するフォントの非常に微妙な違いで驚異的な効果を発揮します。

理解する必要があるのは、フォントと書体の違いです。これら 2 つの用語は頻繁に、そして誤って同じ意味で使用されます。フォントとは、文字、数字記号などの完全なコレクションです。そのコレクションのデザインを指す場合、それを書体と呼びます。

フォントの分類

書体に適用できるさまざまな分類があります。それらは、セリフ、サンセリフ、ディスプレイ、手書き (またはスクリプト)、および等幅です。他にも印刷物で使用されているものがありますが、ここでは気にする必要はありません。

それでは、それらの違いは何でしょうか?

セリフ 書体には、各文字の端に尾が垂れ下がっています。

サンセリフ書体には尾部がありません。

ディスプレイ書体は珍しく、装飾的です。

手書き書体は、手書きの筆記体または楷書のように見えます。

最後に、等幅フォントは、それぞれがまったく同じ量のスペースを占める文字で構成されます。

Web デザインのフォントのベストプラクティス

使用するフォントを選択する際には、従うべきベストプラクティスガイドラインがいくつかあります。

サイトのデザインでは異なるフォントを 2 つ以上使用することは避けることをお勧めします。 3 つ以上のフォントのバランスを取るのは難しい場合があります。また、1 つのサイトで 2 つ以上の書体を混在させると、視覚的に重大な問題が発生する可能性があります。

2 つの異なるフォント (たとえば、タイトルに 1 つとコンテンツに 1 つ) を使用している場合は、同じ書体分類からそれらを選択しないようにしてください。最適なのは書体を組み合わせることです。つまり、2 つの異なる Serif フォント、または 2 つの異なる Sans serif フォントの使用は避けてください。

タイトルには非常に適しているが、本文には理想的ではないフォントや、その逆のフォントがあります。コンテンツに読みにくいフォントを使用しているサイトがあります。 コンテンツフォントはすっきりしていて読みやすい必要がありますが、タイトルフォントは最大限のインパクトを与え、サイトの特定の領域に注目を集めるために使用する必要があります。

WordPress 用 Google フォントのまとめ

もうお気づきかと思いますが、Web サイトのデザインにフォントを選択するのは、難しく複雑なプロセスです。決定には、単に 2 つのフォントを選択するだけでは不十分です。

選択する際に確認すべきことがいくつかあります。ヘッダークラス階層のバランスが取れており、ヘッダータグの相対的なサイズが減少していることを確認してください。

優れたサイトデザインとタイポグラフィーの勝負の半分は、フォントの選択に一貫性を持たせるかどうかです。これには、フォントのサイズ、太さ、間隔が含まれます。 Google Fonts と Google Typography プラグインを使用すると、このプロセス全体がこれまでよりはるかに簡単になります。これらのリソースを使用しても、プロフェッショナルでバランスのとれたタイポグラフィーを実現することは依然として課題です。

どの選択をするかまだ確信が持てず、すべての選択肢の違いを理解しようとして迷っている場合。プロのデザイナーにあなたのサイトを見てもらう時期が来ているかもしれません。

Web サイトに Google Fonts を導入しましたか? Google Fontsを含むテーマを最初から作成しましたか?以下のコメント欄で、タイポグラフィやお気に入りのフォントについてのご意見をお待ちしております。