GoogleとプラグインでGoogleFontsを使用するためのガイド方法！

あなたがデザイナーであるならば、あなたはどんなウェブサイトデザインの基礎としてタイポグラフィを考える可能性が高いです。 フォントを選択するだけでなく、Webページの読みやすさにも優位性をもたらします。

タイポグラフィとは何ですか？
タイポグラフィとは、行の長さ、ポイントサイズ、行の間隔、書体を選択し、文字のグループ間のスペースを調整することです。

なぜGoogleFontsが明確な選択なのですか？
インターネットには、誰もが見ることのできない標準フォントがあったこともありましたが、時間の経過とともに、Webデザイナーと開発者は、ライブテキストフォントの選択肢を制限し、最大数のユーザーと互換性のあるフォントを設計することを余儀なくされました。インターネット。 彼らはCSS3を思いついた。 Typekitがそれを開始しました。

Typekitは、デザイナーがWebページに魅力的でユーザーフレンドリーなフォントを選択するのに役立つ魅力的なフォントのいくつかを開発しましたが、Typekitを使用する際の唯一の問題は、ユーザーに請求するコストでした。

価格は49ドルで、デザイナーが2つのサイトを開発したい場合、Webページでフォントを使用するためだけに99ドルを支払う必要がありました。 素晴らしいフォントデザインを提供してくれたGoogleに感謝します。

お金で得られるものを無料で手に入れることができないことは明らかですが、それでもGoogle WebFontsはTypekitが提供するものよりも優れていました。 もちろん、ウェブサイト全体の構築にはコストがかかりすぎることがわかっているので、フォントにあまりお金をかけたくない場合は、GoogleWebフォントが最適です。

Google Fontsとそのカスタマイズ：
現在、Googleライブラリには647を超えるフォントのフォントファミリーがあります。 Webサイトのコンテンツのフォントを選択するときは、そのフォントを実装する方法と同様の方法でフォントを表示することが不可欠です。 一部のフォントは本文のコンテンツには最適に見えますが、見出しとしては恐ろしいものです。

幸い、Google Web Fontsを使用すると、ユースケースに合わせてプレビューをカスタマイズできます。 カスタムプレビューテキストを入力し、必要に応じてプレビューサイズを変更できます。 段落ビューで使用するヘッダーまたは本文のコピーをプレビューすることが重要です。本文のコピーが多い場合は、カスタムフォントをあまり使用しないでください。

適切なフォントをファネリング！
600を超えるフォントファミリをふるいにかけることを認識しているため、それらを1つずつスクロールするだけでは、適切なフォントファミリをフィルタリングして選択することが難しくなります。 したがって、以下の手順を使用して、Webサイトに必要なものを正確に絞り込みます。

• Googleによって最近更新されたフォントをざっと見てみましょう。 残りのフォントを探すことなく、トレンドのバグのないフォントを入手できる可能性があります。 また、ほとんどのデザイナーや開発者が使用しているフォントもご覧ください。 これを行うことで、複数のスタイルと幅で使用できる用途の広いフォントを知ることができます。
• Webサイトの書体がわかっている場合は、手書きフォントが必要な場合のように、フォントの特性とスタイルによって結果を改善できる場合は、他のすべてのタイプの結果を無効にします。
• Googleでは、フィルタリングオプションとして文字の太さ、傾斜、幅を追加することで、フォント検索をさらに絞り込むことができます。 あなたのウェブサイトに最適なフォントを取得するのはクールな機能ではありませんか？

フォントの選択
Googleには、ウェブサイトの所有者のニーズに応じてフォントを選択して実装するためのさまざまな方法があります。 ここには正しいことも悪いこともありません。 あなたに最適なものは何でも、あなたはそれを手に入れるでしょう。 適切なフォントを選択するのに役立つ3つのボタンをサポートしています。

• クイック使用：好きなフォントをすばやく確認します。
• ポップアウト：好きなフォント、つまりその機能と使用法についてもっと知るため。
• コレクション： 3つ以上のフォントを使用する場合、コレクションはクリックする必要のあるボタンです。 1ページに好きなフォントがすべて追加されます。

Google Fontsの使い方は？
Webページで使用するフォントを選択したら、[使用]タブをクリックして、実際のフォントを確認できます。 これで、フォントについて確信が持てたら、必要なのはWebページにコードをコピーして貼り付けるだけです。 次の3つのオプションから選択できます。

標準：
これは標準のスタイルシートリンクです。 HTMLファイルの先頭部分に配置する必要があります。これにより、すでにスローされているスタイルシートを大幅に追加するため、@ importルールを追加する手順を省くことができます。例：

CSS：
ヘッダーで自動生成されたスタイルシートにリンクしたくない場合は、CSS @ importルールを使用してください。 以下のコードを使用して、フォントをCSSに統合します。

font-family: 'Henry Pigeous', serif;
font-family: 'Diplomatic'. cursive;

JavaScript
GoogleとTypekitはどちらも、ユーザーがフォントの読み込みをより細かく制御できるように、WebFontローダーの一部としてこのコードをここで開発しました。

HTMLスニペットを取得し、次のようにHTMLヘッダーの近くに配置します。

ページタイトル

CSSにジャンプして、これに従ってください。

h1 {
font: 400 45px/0.5 'Diplomatic', Arial, sans-serif;
}
p {
font: 400 14px/1.5 'Henry Pegasus', Times, serif;
}

プラグインの助けを借りて！
シームレスなGoogleFont統合を提供するプラグインがいくつかあります。 プラグインの使用には、プラグインがHTMLまたはCSSを使用してさらにカスタマイズしない限り、特定のテキストを検索することを認識しないなどの制限があります。 それでも、ウェブサイトにGoogleフォントを含めるためのプラグインはいくつかあります。

1.フォントプラグイン

これは、数回クリックするだけでGoogleフォントをWebサイトに挿入する簡単で効果的な方法です。 スタイルシートを使用することも、CSSスタイルを使用することもできます。 どちらもあなたのテーマにそれらを適応させるために働きます。 管理エリアまたはWebサイトのスタイルシートから実行できます。 フォントプラグインは、ウェブサイトに必要なものすべてをすばやく効率的に提供します。

2.簡単なGoogleFonts

Easy Google Fontsプラグインを使用すると、ウェブサイトでフォントを取得するためにコーディングに触れる必要はありません。 選択から最適化、ライブからプレビューまでのユニークな色の提供まで、フォントのすべてをEasy GoogleFontsを使用して実行できます。

3. TKGoogleフォント

TK Google Fontsは、ページや投稿を作成するときに、291個のGoogleWebフォントすべてをビジュアルエディターパネルに追加します。 インストールして使い始めるだけです。

上記のプラグインのインストール：

• WordPress管理者にログインします
• 「プラグイン」をクリックします
• 「新規追加」をクリックします
• 右上隅にプラグイン名を入力し、「今すぐインストール」をクリックします

プラグインをカスタマイズするには

• 「外観」をクリックしてから「カスタマイズ」をクリックします。
• 「サイトにアクセス」をクリックしてから「カスタマイズ」をクリックします
• 「タイポグラフィ」として新しく追加されたメニューに気付くでしょう

学習を実装してください！
記事を読むことが使用するための学習レッスンであったことを願っています。そして今、あなたのウェブサイトでこの知識を使用する時が来ました。 さまざまなフォントやプラグインを参照して、Webサイトのタイポグラフィを改善します。 フォントをカスタマイズする場合は、フォントをコピーして貼り付けるよりも効果的であることに注意してください。 プロジェクトで視聴者を魅了するためにタイポグラフィを追加するために使用するフォントと方法を教えてください。

フォントはウェブサイトの美的形態を強化し、あらゆるウェブサイトデザインの基盤となります。 フォントやタイポグラフィとは、行の長さ、ポイントサイズ、行の間隔、書体を選択し、グループ文字間のスペースを調整することです。

デザイナーとして、フィルタリングオプションとして文字の太さ、傾斜、幅を追加することにより、フォント検索をさらに絞り込むことは常に良いことです。 すべてのフォントが本文や見出しのコンテンツで見栄えがするわけではありません。

一部のフォントは見出しとして見栄えが悪く、他のフォントは本文のコンテンツで簡単に読み取ることができません。 したがって、読みやすさをテストできるように、選択したフォントを実装方法と同様の方法で表示することをお勧めします。

インターネットが同じ古い退屈な標準フォントを持っていた時代は終わりました。 技術が進歩し、Webデザイナーと開発者は、インターネット上で最も多くのユーザーと互換性のあるフォントを設計することを余儀なくされました。

彼らはCSS3を思いついた。 Typekitはそれを開始し、Webデザイナーが使用できる魅力的で魅力的なフォントのいくつかを開発しました。 しかし、彼らはあまりにも高価でした。 ありがたいことに、Googleが助けになり、見事でユーザーフレンドリーなフォントデザインを無料で提供しました。

正しいフォントをファネリング！

現在、グーグルライブラリのフォント数は647であるため、適切なフォントをフィルタリングして選択することは困難です。 ただし、次の3つの手順を使用すると、Webサイトに必要なものを正確に取得できます。

• グーグルで最近更新されたフォントを見て、流行のバグのないフォントを入手してください。 また、大多数のデザイナーが使用しているフォントを調べて、複数のスタイルと幅で使用できるフォントの多様性について知ることができます。
• 結果を改善するために、Webサイトの書体、フォントの特性とスタイルを理解してください。
• フィルタリングオプションとして文字の太さ、傾き、幅を追加して、フォント検索を絞り込みます。

フォントの選択

ニーズに応じて、Googleにはフォントの選択に役立ついくつかの方法があります。 適切なフォントを選択するには、次のことを考慮してください。

クイックアクセス-好きなフォントをすばやく確認するには

ポップアウト-フォント、つまり機能と使用法について詳しく知るため

コレクション-2つ以上のフォントを使用する場合は、このボタンをクリックしてください。 1ページに好きなフォントがすべて追加されます。

GoogleFontsの使い方

好みのフォントを選択したら、[使用]タブをクリックして、実際のフォントを確認します。 次に、コードをコピーしてWebページに貼り付けます。 次の3つのオプションから選択できます。

標準-これは標準のスタイルシートリンクです。 HTMLファイルの先頭部分に配置します。 @importルールをすでに持っているスタイルシートに大幅に追加しているので、@ importルールを追加する手順を省くことができます。

CSS-ヘッダーで自動生成されたスタイルシートにリンクしたくない場合は、CSS @ importルールを使用します。 以下のコードを使用して、フォントをCSSに統合します。

font-family： 'Henry Pigeous'、セリフ;
font-family： '外交'。 筆記体;

JavaScript -GoogleとTypekitはどちらも、ユーザーがフォントの読み込みをより細かく制御できるように、Webフォントローダーの一部としてこのコードをここで開発しました。

HTMLスニペットを取得し、次のようにHTMLヘッダーの近くに配置します。

ページタイトル

CSSにジャンプして、これに従ってください。

h1 {

フォント：400 45px / 0.5'Diplomatic '、Arial、sans-serif;

}

p {

フォント：400 14px / 1.5'Henry Pegasus '、Times、serif;

}

著者について：
Catherrine Garciaは、Hosting Factsの経験豊富なWeb開発者であり、熱心なブロガーです。 彼女は、Web開発とWordPressに関する記事を通じて知識を共有するのが大好きです。