WordPressでローカルフォントをホスティングサービスしてサイトを高速化する方法

美しいタイポグラフィはサイトのデザインを向上させ、閲覧者を魅了します。しかし、WordPressのパフォーマンスの専門家として、サードパーティのフォントサービスに依存すると、サイトの速度が低下し、ユーザーエクスペリエンスが損なわれ、SEOにも悪影響が及ぶ可能性があることが分かっています。

解決策は、フォントをローカルにホスティングサービスすることです。フォントファイルをコントロールすることで、サイトは余分な読み込みステップを省くことができ、ユーザーエクスペリエンスとSEOに優れた高速サイトを実現できます。

この投稿では、WordPressでローカルフォントをホスティングサービスし、最適なパフォーマンスを維持しながらサイトのタイポグラフィを向上させる方法を紹介します。

WordPressでフォントをホスティングサービスする理由

タイポグラフィやカスタムフォントはサイト全体の美観を向上させますが、WordPressのパフォーマンスには悪影響を及ぼします。例えば、Google Fontsのカスタムフォントを使用している場合、それらはサードパーティのサービスから読み込まれるため、サイトの速度が遅くなります。

幸いなことに、サイトを遅くすることなくカスタマイザーを使用する方法があります。WordPress 6.0で新しいWebfonts APIが導入された。これにより、フォントをローカルでホスティングできるようになり、読み込みが速くなりました。

Google Fontsをローカルでホスティングサービスするもう一つの理由は、GDPRに準拠するためです。欧州連合（EU）からのサイト訪問者がいる場合、これは重要な法的考慮事項です。

Google Fontsを使用しているサイトに誰かがアクセスすると、フォントが読み込まれる際にその人のIPアドレスがGoogleによってログ記録されます。これは彼らの権限なしに行われるため、EUは現在これをプライバシー規制違反とみなし、損害賠償責任を負う可能性があります。

それでは、WordPressでローカルフォントをホスティングしてサイトを高速化する方法を見ていきましょう。ここでは2つの方法を取り上げますが、ほとんどのユーザーには最初の方法をお勧めします。

方法1：プラグインを使ってWordPressでローカルフォントをホスティングサービスする

まず最初に行う必要があるのは、OMGF（Optimize My Google Fonts）プラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

OMGFは最高のWordPressタイポグラフィープラグインの一つです。Google Fontsをローカルにホスティングサービスすることで、パフォーマンスとGDPRコンプライアンスを向上させる初心者に優しい方法を提供する。

有効化したら、設定にアクセスする必要があります“プラグインを設定するには、Googleフォントをオプティマイズ.あなたは ‘フォントの最適化’タブを探している必要があります。

Google Fontsのオプティマイズ」の見出しにある、初期設定を使用してGoogle Fontsをローカルにホスティングされたコピーに自動的に置き換えるだけでよいという記述に注目してください。

つまり、設定ページをスクロールしていくうちに、「フォント表示オプション」の初期設定が「スワップ（推奨）」になっていることをすべて確認すればよいのだ。

あとはすべて、ページ下部の「Save & Optimize」ボタンをクリックするだけだ。

画面上部に『最適化が正常に完了しました』というメッセージが表示されます。

おめでとうございます！Googleフォントがローカルでホスティングサービスされるようになりました。サイトの読み込みが速くなり、欧州訴訟のリスクも軽減されます。

方法2：WordPressでローカルフォントを手動でホスティングサービスする

WordPressでカスタムフォントを追加する方法のガイドにある@font-faceメソッドを使用することで、プラグインを使用せずにローカルにフォントをホスティングすることもできます。この方法はより多くの作業が必須ですが、あなたのサイトで好きなフォントを使用することができます。

ウェブフォーマットで使用したいフォントをダウンロードする必要があります。Google Fonts、Typekit、FontSquirrelなど、素晴らしい無料のウェブフォントを見つける場所はたくさんあります。

フォントのウェブフォーマットを持っていない場合は、FontSquirrel ウェブフォントジェネレータを使って変換できます。

WordPressホスティングサービスサーバーにフォントを保存する必要があります。FTPまたはホスティングサービスのcPanelファイルマネージャを使用してファイルをアップロードすることができます。

テーマまたは子テーマのディレクトリに「fonts」という新しいフォルダーを作成し、そこにアップダーしてください。

フォントをアップロードしたら、カスタムCSSを使ってテーマのスタイルシートにフォントを読み込む必要があります。テーマの style.css ファイルに直接コードを追加するか、テーマカスタマイザーの Additional CSS セクションを使用します。

そのためには、CSS3の@font-faceルールを次のように使用する：

@font-face {
    font-family: Arvo;
    src: url(http://example.com/wp-content/themes/twentytwentyone/fonts/Arvo-Regular.ttf);
    font-weight: normal;
}

フォントファミリーとURLを自分のものに置き換えるのをお忘れなく。

その後、テーマのスタイルシートまたはテーマ・カスタマイザーの追加CSSセクションの任意の場所でそのフォントを使用することができます。使用するCSSは、テーマとローカルフォントを使用する場所によって異なります。以下はデモサイトの例です：

h1 {
font-family: Arvo, Arial, sans-serif;
}

ご覧の通り、見出しにはローカルでホスティングサービスされているArvoフォントが使われています。

WordPressのフォントに関するエキスパートガイド

ローカルフォントをホスティングサービスする方法はお分かりいただけたと思いますが、WordPressでフォントを使用する方法に関する他のガイドもご覧ください。

• ウェブセーフフォントとは + 19のベストウェブセーフフォント
• WordPressテーマのフォントを変更する方法（簡単な方法）
• WordPressでフォントサイズを簡単に変更する方法
• WordPressでカスタムフォントを追加する方法
• Googleフォントをプライバシーに配慮したものにする方法
• WordPressサイトのGoogleフォントを無効化する方法
• WordPressテーマにアイコンフォントを簡単に追加する方法
• デザインを向上させるWordPressタイポグラフィプラグインベスト

このチュートリアルで、WordPress でローカルフォントをホストしてサイトを高速化する方法をご理解いただけたでしょうか。また、ブログのトラフィックを増やす方法についてのガイド、またはサイトを成長させるために必要なWordPressプラグインのエキスパートセレクションもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.