WordPressでローカルにGoogleFontsを簡単にホストする方法

公開: 2022-05-05

Googleフォントは、ウェブサイト内で使用できるフォントの幅広い選択肢を提供し、ローカルでホストする必要はありません。最近のほとんどのテーマには、実際にフォントが統合されています。また、Googleフォントを統合するプラグインを使用して、フォントをWebサイトに追加することもできます。これらのシナリオでは、WebサイトがGoogleサーバーにフォントを要求します。

この記事では、Google Fontsとは何か、ローカルでホストすることを検討する理由、WordPressWebサイト内でこれを実現する方法について説明します。

GoogleFontsとは

GoogleFontsをローカルでホストする必要がある理由

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

手動による方法を使用してローカルでGoogleFontsをホストする

プラグインを使用してローカルでGoogleFontsをホストする

テーマ内でGoogleFontsを無効にする

結論

GoogleFontsとは

Googleフォントは、互換性のために最適化され、Googleが所有するオープンソースフォントファミリーのコレクションです。

これらのフォントはfonts.google.comで見つけることができます。

これらのフォントは2010年に導入されて以来、Webサイトで広く使用されています。 Googleフォント分析を確認すると、フォントビューの総数は現在61,065,424,145,531です。

これは間違いなく、これらのフォントが時間の経過とともに大量に使用されていることを意味し、Robotoフォントが実際にビューの面で主導権を握っています。

GoogleFontsをローカルでホストする必要がある理由

GoogleフォントのリクエストはGoogleサーバーに対して行われるため、ウェブサイト内でこれらのフォントを多数使用している可能性がある場合、サーバーへのリクエストが多数発生します。これにより、HTTPリクエストの数が原因で、Webサイトの速度が少し遅くなります。

このような場合、GTMetrix、PageSpeed Insights、Pingdomなどのツールを使用してサイトをテストすると、Googleフォントにフラグが付けられ、スコアと読み込み時間が短縮される可能性があります。

したがって、HTTPリクエストのトラフィックを減らし、サイト全体のパフォーマンスを向上させるために、サーバーで必要なフォントをホストすることは重要です。

さらに、フォントをローカルでホストする場合は、WebサイトにCDNを使用することをお勧めします。 CDNを使用しない場合、Webサイトの速度に悪影響を与える可能性があります。

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

WordPressサイト内でローカルにGoogleFontsをホストすることは、プラグインを使用するか手動で行うことができます。両方の方法を使用して、これがどのように達成できるかを調べます。

手動による方法を使用してローカルでGoogleFontsをホストする

手動の方法を使用してこれらのフォントをローカルでホストするには、次の手順を実行する必要があります。

1.フォントをダウンロードする

フォントファイルをダウンロードするには、まずfonts.google.comに移動して、目的のフォントを検索します。ここでの例では、OpenSansを使用します。

それを特定したら、「ファミリーのダウンロード」ボタンをクリックします。

次に、すべてのフォントスタイルと太さを含むzipファイルがコンピューターにダウンロードされます。

2.ファイルを抽出します

次に、zipファイルを抽出し、不要なファイルを削除する必要があります。この場合、必要なのはOpenSans-RegularとOpenSans-Boldだけです。

3.TrueTypeフォントファイルを変換します

使用しているフォントはTrueTypeフォント形式（TTF）です。フォーマット固有の圧縮のために、これらをWeb Open Font Format（WOFF）に変換する必要があります。

これを実現するために、cloudconvertやconvertioなどの好みのツールを使用できます。

ファイルを変換すると、.woffファイル形式をコンピューターにダウンロードできます。

4.サーバー上のサイトファイルにアクセスし、フォントディレクトリを設定します

サイトファイルにアクセスするには、cPanelなどのホスティングパネルにログインするか、FilezillaなどのFTPソフトウェアを使用する必要があります。

これが完了したら、サイトファイルのルート内に「fonts」ディレクトリをまだ作成していない場合は作成します。

5.Googleフォントをアップロードします

作成した「fonts」ディレクトリ内に、.woffフォントファイルをアップロードします。

6.フォントをテーマCSSに統合します

テーマCSSにフォントを追加するには、@font-faceメソッドを使用します。これを行うには、WordPressダッシュボードにアクセスし、[外観]>[カスタマイズ]>[追加のCSS]セクションに移動します。

次に、[追加のCSS]セクションに以下のCSSコードを追加します。

 @font-face { font-family: 'OpenSans-Regular'; src: url('https://yoururl/fonts/OpenSans-Regular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenSans-Bold'; src: url('https://yoururl/fonts/OpenSans-Bold.woff') format('woff'); font-weight: normal; font-style: normal; }

yoururlを実際のURLに置き換え、フォントファミリをフォントの実際のフォントファミリに置き換える必要があります。これが完了したら、変更を保存します。

7.Webサイトのセクションまたはコンテンツにフォントを適用します

Webサイト内のセクションまたはコンテンツにフォントを適用するには、カスタムCSSを使用して適用する必要があります。たとえば、次のCSSコードを追加することで、フォントを使用してサイトに段落を含めることができます。

 p { font-family: 'OpenSans-Bold'; }

サイトにアクセスすると、フォントが段落に適用されていることがわかります。以下はサンプルのスクリーンショットです。

プラグインを使用してローカルでGoogleFontsをホストする

この方法では、OMGF|を使用することをお勧めします。 GoogleFontsLocallyプラグインをホストします。プラグインをインストールするには、WordPressダッシュボード内の[プラグイン]> [新規追加]セクションに移動して、プラグインを検索します。

「今すぐインストール」ボタンをクリックしてプラグインのインストールに進み、プラグインをアクティブにします。

これが完了したら、[設定]>[GoogleFontsの最適化]セクションに移動します。

[フォントの最適化]タブで、[保存して最適化]ボタンをクリックします。

これにより、Googleフォントがローカルでホストされるようになります。

テーマ内でGoogleFontsを無効にする

フォントをローカルでホストする場合は、以前にフォントに統合されていたフォントを無効にする必要があります。使用しているテーマに応じて、これを実行する方法にはさまざまなアプローチがあります。一部のテーマでは、Googleフォントの読み込みを無効にするオプションがあります。

別の方法は、Disable and RemoveGoogleFontsプラグインを使用することです。ただし、プラグインは、そこにあるすべてのテーマとプラグインで機能するとは限りません。ほとんどの場合、デフォルトのWordPressテーマでのみ機能します。

他のテーマでは、テーマコードをカスタマイズし、Googleフォントの統合を削除する必要があります。このような場合は、テーマの開発チームに相談することをお勧めします。

結論

フォントをローカルでホストすることは、WordPressサイト内に実装するのに複雑な作業ではありません。 Googleフォントをローカルでホストすることに伴う最適化とページ速度の利点を考慮すると、これは間違いなく考慮する必要があるものです。