WordPressにGoogleFontsを追加するにはどうすればよいですか？ 4つの簡単な方法！

公開: 2020-09-19

あなたのウェブサイトのタイポグラフィをカスタマイズしたいですか？ あなたは正しい場所に来ました。 このガイドでは、WordPressサイトにGoogleFontsを追加するさまざまな方法を段階的に説明します。

デフォルトでは、WordPressテーマにはいくつかの特定のフォントが付属しており、コンテンツを公開すると、これらのフォントはフロントエンドでレンダリングされます。 ただし、サイトでカスタムフォントを使用して、ブランドに最適なルックアンドフィールを提供したい場合があります。 そのため、本日は、サイトにGoogleFontsを含める方法を紹介します。

なぜWordPressにGoogleFontsを追加するのですか？

使用するフォントは、サイトに大きな影響を与えます。 一方では、それはあなたのウェブサイトのデザインとそれがどのように見えるかに影響します。 フォントは、訪問者がサイトにアクセスしたときに最初に目にするものの1つであるため、ビジネスのスタイルと一致している必要があります。 一方、ユーザーエクスペリエンスにも影響を与える可能性があります。 たとえば、フォントが読みにくい場合、訪問者は必要なものを見つけてサイトを離れるのに苦労します。 したがって、適切なフォントを使用すると、サイトの見栄えが良くなるだけでなく、ユーザーエクスペリエンスも向上します。

そのため、ビジネスの本質を伝える使いやすいフォントを使用することを強くお勧めします。 AdobeのTypekitやFriconixなどのフォントサービスがいくつかあります。 ただし、最高のものはGoogle Fontsです。これは、Webサイトと統合する準備ができている何千ものフォントファミリを備えた無料のサービスです。

そして最良の部分は、WordPressにGoogle Fontsを追加するのは非常に簡単で、5分しかかからないことです。 それを行うにはいくつかの方法があります。

WordPressサイトにGoogleFontsを追加する方法

WordPressにGoogleFontsを含めるにはさまざまな方法があります。

  1. プラグインの使用
  2. Functions.phpファイルの編集
  3. Style.css経由
  4. header.phpファイルを編集する

これらのオプションはすべて仕事を成し遂げるので、あなたのスキルとニーズに最も合うものを選択してください。 これらの各方法を詳しく見る前に、テーマにGoogleFontsの統合が含まれているかどうかを確認する必要があります。

Google FontIntegrationを確認してください

ほとんどのWordPressテーマには、専用のテーマパネルが付属しています。 そこから、ユーザーはコードを記述せずにテーマ全体をカスタマイズできます。 GeneratePressのようないくつかのテーマには、統合されたGoogleFontsサポートが付属しています。 これは、フォントを統合するためにプラグインやカスタムコードを使用する必要がないことを意味します。 これにより、時間を節約し、作業を簡単にすることができます。

Google Fontsとの統合に付属するテーマを使用する場合は、テーマパネルまたはWordPressカスタマイザーからサイトのタイポグラフィを変更できます。 そのため、サイトにGoogle Fontsを含めるプロセスを開始する前に、テーマにすでにGoogleFontsが付属しているかどうかを確認することをお勧めします。

それでは、WordPressサイトにGoogleFontsを追加するための各方法を見てみましょう。

1）プラグインの使用

WordPressにGoogleFontsを追加する最も簡単な方法の1つは、プラグインを使用することです。 そこにある最高のものの1つはGoogleFontsTypographyです。 これは、コードを1行も記述せずに、サイトにGoogleFontsを含めるのに役立つ無料のツールです。

まず、Webサイトにプラグインをインストールしてアクティブ化します。

ワードプレスにグーグルフォントを追加-グーグルフォントプラグイン

その後、プラグインに移動し、プラグインの設定を確認します。

それをクリックすると、WordPressカスタマイザーにリダイレクトされます。

そこから、Webサイトのタイポグラフィを制御できます。 4つの主要な構成が表示されます。

  • 基本設定
  • 高度な設定
  • フォントの読み込み
  • デバッグ

基本設定と詳細設定の両方が提供するものを見てみましょう。

基本設定

基本的なタイポグラフィのセクションから、本文、見出し、入力フィールドのデフォルトのフォントファミリを選択できます。

ワードプレスにグーグルフォントを追加する-グーグルフォントの基本設定

各フォントファミリーセクションの下のドロップダウンから、何百ものGoogleフォントのいずれかを選択できます。 必要なフォントがわかっている場合は、検索機能を使用して入力するだけです。

このチュートリアルでは、WorkSansフォントを使用します。 ドロップダウンからフォントを選択すると、変更が即座に反映され、新しいフォントのライブプレビューが表示されます。 その上、カスタムフォントの太さとスタイルを指定することができます。

終了したら、変更を公開します。

高度な設定

[詳細設定]で、ブランディング、ナビゲーション、コンテンツ、サイドバー、およびフッターのフォントファミリを選択できます。

ワードプレスにグーグルフォントを追加する-グーグルフォントの詳細設定

これは、Webサイトのさまざまな部分でさまざまなフォントを使用することを計画している場合に優れた機能です。 ドロップダウンからフォントを選択したら、変更を公開します。

Google Fontsの無料バージョンには機能が制限されていますが、1つのサイトで29米ドルから始まるプレミアムバージョンもあります。

このプロバージョンは、フォントサイズ、色、最適化、カスタム要素などの構成に役立ちます。 すべてのタイポグラフィオプションを制御したい場合に最適です。 一方、これにお金をかけたくない場合は、CSSを少し使用してこれらの変更を行うことができます。

2）functions.phpファイルを編集します

WordPressサイトにGoogleFontsを追加する別のオプションは、 functions.phpファイルを編集することです。 この方法を進める前に、子テーマを使用していることを確認してください。 方法がわからない場合は、子テーマを作成する方法や子テーマプラグインを使用する方法について読むことができます。

この方法では、 functions.phpファイルを直接編集するか、プラグインを使用できます。 初心者の場合は、CodeSnippetsプラグインを使用してサイトにカスタムコードを追加することをお勧めします。 このガイドでは、コードスニペットを使用します。

注：コードスニペットを使用する場合は、子テーマを作成する必要がないことに注意してください。 ただし、常に1つ持つことをお勧めします。

したがって、コードスニペットを使用してfunctions.phpを編集するには、まずプラグインをインストールしてアクティブ化します。

ワードプレスにグーグルフォントを追加-コードスニペット

次に、プラグインの設定に移動します。 そこから、サイトに新しいスニペットを追加できます。

フォントを選択する

新しいタブで、Google Fontsを開き、Webサイトで使用するフォントファミリを選択します。 サイトのフォント検索機能を使用するか、単に参照することができます。 この例では、Latoファミリーを使用します。

ワードプレスにグーグルフォントを追加-フォントを選択

フォントを選択すると、フォントのページに移動します。 フォントをサイトに追加する前にテストできるプレビューオプションが表示されます。 その後、使用するスタイルを選択します。 たとえば、レギュラースタイルとボールドスタイルを選択します。

右側のパネルで選択内容を確認できます。

スタイルを追加したら、WordPressに埋め込む準備が整います。 これを行うには、[埋め込み]タブからフォントファミリのリンクをコピーします。

ワードプレスにグーグルフォントを追加する-埋め込み方法

フォントをサイトに追加します

次に、次のスニペットをコピーして、コードスニペットプラグインに貼り付けます。

 <？php
関数wpb_add_google_fonts（）{
   wp_enqueue_style（ 'wpb-google-fonts'、 'https：//fonts.googleapis.com/css2？family = Lato：[メール保護]; 700＆display = swap'、false）;
   }
   
   add_action（ 'wp_enqueue_scripts'、 'wpb_add_google_fonts'）;
？>

フォントのURLを選択したフォントに置き換えたことを確認してください。

ワードプレスにグーグルフォントを追加-スニペットを追加

その後、スニペットを保存してアクティブにします。 WordPressサイトにGoogleFontsが正常に追加されました。

このタスクにプラグインを使用したくない場合は、FTPクライアントを使用して、上記のコードを子テーマのfunctions.phpファイルに貼り付けるだけです。

新しいフォントを適用します

その後、CSSを少し使って新しいフォントを適用できます。 たとえば、本文のフォントを編集するには、カスタマイザーの[追加のCSS]セクションに次のコードを追加します。

 体 {
font-family： 'Lato'、sans-serif;
}

ワードプレスにグーグルフォントを追加-追加のCSS

変更を公開すると、本文のフォントがどのように変更されるかがわかります。 カスタマイザーを使用しているため、プレビューセクションに変更がすぐに表示されます。

サイト上の他の要素を変更する必要がある場合は、上記のコードを変更し、変更する要素とフォントファミリを指定する必要があります。 たとえば、すべてのh3ヘッダーを新しいフォントに変更する場合は、次のように記述します。

 h3 { 
font-family： 'Lato'、sans-serif; 
}

このようにして、無制限のGoogle Fontファミリを追加し、WordPressサイトをカスタマイズすることができます。

3）style.css（@import）をカスタマイズします

WordPressにGoogleFontsを追加する別の方法は、style.cssファイルを使用することです。 今回は、PHPコードを使用する代わりに、Webサイトのstyle.cssを編集して新しいフォントファミリーを追加します。

フォントを選択します

まず、Google Fontsに移動し、サイトで使用するものを選択します。 [埋め込み]セクションで、 @ importモードを選択します。

フォントをサイトに追加します

これで、パネルに一意のCSSコードが表示されます。 コードをコピーして、WordPressダッシュボードの追加CSSに貼り付けるだけです。

次に、[公開]ボタンを押します。

新しいフォントを適用します

その後、新しいフォントを適用する場所を決定できます。 たとえば、筆記体でKufamフォントを選択したため、本文のフォントを変更するには、次のCSSコードを使用します。

 体 {
font-family： 'Kufam'、筆記体;
}

ご覧のとおり、ライブプレビューセクションは自動的に更新され、変更が表示されます。

ワードプレスにグーグルフォントを追加-フォントを適用

同様に、すべてのh2見出しに新しいフォントを適用する場合、使用する必要のあるコードは次のとおりです。

 h2 { 
font-family： 'Kufam'、筆記体; 
}

これは、初心者でも使用できるもう1つの非常に簡単な方法です。 そして良いことは、プラグインを必要としないことです。

4）header.phpファイルを編集します

WordPressサイトにGoogleFontsを追加する4番目の方法は、header.phpファイルを編集することです。 WordPressでヘッダーを編集する方法は以前に見てきたので、その投稿を読んだことがあれば、これは簡単です。 していなくても心配しないでください。 このセクションでは、新しいフォントを含める方法を説明します。 少しコーディングが必要ですが、初心者でも簡単です。

このために必要なもの：

  • GoogleFontのリンク
  • style.cssファイルへのパス

それぞれを取得する方法を見てみましょう。

GoogleFontのリンクを取得する

フォントのリンクは、Google FontsWebサイトから取得できます。 使用する予定のフォントを検索して選択します。

アドレスバーに、フォントのURLが表示されます。

ワードプレスにグーグルフォントを追加-フォントURL

style.cssパスを取得します

それでは、 style.cssパスを見つける方法を見てみましょう。 cPanelにアクセスできる場合は、サイトのコントロールパネルにログインして、ファイルマネージャーを開きます。 wp-contentフォルダーには、 themesというフォルダーがあります。 インストールされているすべてのテーマがここにあります。 先に進む前に、あなたはあなたのウェブサイトのアクティブなテーマが何であるかを知る必要があります。

アクティブなテーマは、WordPressダッシュボードの[外観]セクションにあります。

たとえば、私たちの場合、それは二十二十です。

cPanelでは、 wp-content> themes> 20に移動します。

左側のパネルに、テーマファイルへのパスが表示されます。 それをコピーします。

この例に従って、 public_html / wp-content / themes / twentytwentyのようなものを取得しました。 これで、 public_html部分を削除し、そこにドメイン名を追加して、コードの最後に/style.cssファイルを記載するだけです。 したがって、新しいコードは次のようになりますwww.example.com/wp-content/themes/twentytwenty/style.css 。

ブラウザでURLを開くと、 style.cssファイルが読み込まれます。 404エラーページが表示された場合は、 style.cssファイルへのパスが間違っていることを意味します。

GoogleFontのリンクとstyle.cssをヘッダーに追加します

フォントのリンクとstyle.cssパスを取得したら、WordPressサイトにGoogle Fontsを追加するために必要なのは、下からコードをコピーして、themesheader.phpファイルに貼り付けることだけです。

 <link href = "https://fonts.googleapis.com/css2？family = Oxygen ＆ display = swap" rel = "stylesheet">
<link rel = "stylesheet" type = "text / css" href = "http://yoursite.com/wp-content/themes/yourtheme/style.css" media = "all" >

URLをフォントに置き換え、 style.cssへのパスを独自のものに変更することを忘れないでください。

header.phpファイルを変更することに抵抗がある場合は、Insert Headers andFootersプラグインを使用してコードを追加できます。 このツールの使い方を見てみましょう。

プラグインでheader.phpを変更する

まず、サイトにヘッダーとフッターの挿入をインストールしてアクティブにします。

その後、 [設定]> [ヘッダーとフッターの挿入]に移動します。

そこに3つのブロックが表示されます。

  • ヘッダ
  • 体
  • フッター

ヘッダーセクションにコードを追加するので、上記のコードをフォントのURLとstyle.cssパスとともにヘッダーセクションのスクリプトに貼り付けます。 次に、変更を保存することを忘れないでください。

ボディとフッターのセクションは変更しないため、空のままにしておくことができます。

貼り付けたばかりのコードは、 </ head>タグのすぐ上に配置されます。 プラグインを使用していない場合は、必ず<head>セクションにHTMLコードを貼り付けてください。 そうでなければ、それは動作しません！

これで、統合が完了し、サイトにGoogleFontsが追加されました。

Google FontsProのヒント

サイトにGoogleFontsを追加することは、最初のステップにすぎません。 その後、サイトをさらに最適化するのに役立ついくつかのプロのヒントを確認することをお勧めします。

GoogleFontsをローカルでホストする

Google Fontsは、多くの無料フォントを含むオンラインライブラリです。 彼らのサービスを使用してサイトにフォントを埋め込む場合、サーバーにリクエストを送信し、リクエストされたコンテンツを取得します。 Google Fontsサーバーが技術的な問題に直面している場合、それはWebサイトのパフォーマンスにも影響を与える可能性があります。

この問題を解決するには、ローカルサーバーでフォントをホストすることを検討してください。 これを行うと、追加の外部リクエストを送信する必要がなくなります。 ただし、サーバーのリソースを消費する可能性があることに注意してください。

DNSプリフェッチを有効にする

ほとんどのWordPressキャッシングプラグインには、DNSプリフェッチと呼ばれる機能が付属しています。 外部HTTPリクエストを送信すると、Webサイトの速度が低下するという考え方です。 これを修正するには、DNSプリフェッチ機能を使用して、外部リクエストを減らすためにフェッチできる外部URLを入力できます。

これは、WPRocketプラグインのDNSプリフェッチセクションの例です。

プリフェッチするURLセクションの下にGoogleFontsドメインを入力し、変更を保存するだけです。

フォントの太さを制限する

フォントをカスタマイズするには、フォントの太さを使用できます。 次のような多くのフォントの太さのオプションを利用できます。

  • 薄い
  • エクストラライト
  • 光
  • 通常
  • 中くらい
  • セミボールド
  • はげ
  • 非常に太字
  • 黒

通常、サイトはタイトルに通常のフォントの太さと太字を使用します。 したがって、スタイルを選択するときは、使用する予定のスタイルのみを選択してください。 そうしないと、使用しないサーバーに重みを追加すると、HTTPリクエストが増加します。

結論

全体として、WordPressにGoogle Fontsを追加すると、サイトのタイポグラフィをカスタマイズできるようになります。 Webサイトの見栄えが良くなるだけでなく、顧客により良いエクスペリエンスを提供します。

これを行うためのさまざまな方法を見てきました。

  1. プラグイン付き
  2. 関数.phpファイルを介して
  3. Style.css経由
  4. header.phpファイルを編集する

では、どの方法を使用する必要がありますか？ 彼らはすべて仕事を成し遂げるので、それはあなたのスキルと好みに依存します。 コーディングに慣れていない場合は、プラグイン方式を使用することをお勧めします。 Google Fonts Typographyは非常に使いやすく、Webサイトに追加するのに最適です。 ただし、サイトにプラグインを追加したくない場合は、コードスニペットプラグインまたはFTPを使用してテーマのfunctions.phpファイルを編集できます。 さらに、 style.css @importメソッドは、数行のCSSコードでGoogleFontsを追加するもう1つのすばやく簡単な方法です。 または、フォントのURLとstyle.cssパスをheader.phpファイルに追加することもできます。

この記事が気に入ったら、ソーシャルメディアで友達と共有してください。 サイトを改善するためのより興味深い投稿については、ブログセクションをご覧ください。

どの方法を使用する予定ですか？ 他に知っていますか？ 以下のコメントセクションでお知らせください。