WordPress でローカルフォントをホストしてウェブサイトを高速化する方法

美しいタイポグラフィは、ウェブサイトのデザインを改善し、オーディエンスを魅了することができます。

しかし、ウェブサイトのパフォーマンスを向上させる中で、サードパーティのフォントサービスに依存するとWordPressが遅くなり、ユーザーエクスペリエンスを損ない、SEOにも悪影響を与える可能性があることがわかりました。

この問題を防ぐために、いくつかの方法を見つけました。その解決策の1つは、フォントをローカルでホスティングすることです。

フォントファイルを管理することで、サイトは追加の読み込みステップをスキップでき、優れたユーザーエクスペリエンスとSEOを備えた超高速ウェブサイトを保証します。

この記事では、WordPressでローカルフォントをホストする方法を紹介します。これにより、サイトのタイポグラフィを強化しながら、最適なパフォーマンスを維持できます。

WordPressでフォントをローカルホストする理由

タイポグラフィとカスタムフォントはウェブサイト全体の美観を向上させることができますが、WordPressのパフォーマンスには悪影響があります。例えば、Googleフォントのカスタムフォントを使用している場合、それらはサードパーティのサービスから読み込まれるため、ウェブサイトの速度が低下します。

幸いなことに、サイトの速度を低下させることなくカスタムフォントを使用する方法があります。WordPress 6.0では新しいWebフォントAPIが導入されました。これにより、フォントをローカルでホストできるため、読み込みが速くなります。

Googleフォントをローカルでホストするもう1つの理由は、GDPRに準拠することです。欧州連合のウェブサイト訪問者がいる場合、これは重要な法的考慮事項です。

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

それでは、より高速なウェブサイトのためにWordPressでローカルフォントをホストする方法を見ていきましょう。2つの方法をカバーしますが、最初がほとんどのユーザーにおすすめです。

方法1：プラグインを使用してWordPressでローカルフォントをホストする

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

OMGFは、最高のWordPressタイポグラフィプラグインの1つです。Googleフォントをローカルでホストすることにより、パフォーマンスとGDPRコンプライアンスを向上させるための初心者向けの簡単な方法を提供します。

有効化したら、プラグインを設定するために設定 » Googleフォントの最適化にアクセスする必要があります。「フォントの最適化」タブが表示されているはずです。

「Googleフォントの最適化」という見出しの下にある、Googleフォントをローカルでホストされたコピーに自動的に置き換えるにはデフォルト設定を使用するだけでよいという記述に注意してください。

つまり、設定ページを下にスクロールしていくと、必要なのは「フォント表示オプション」がデフォルト設定の「Swap（推奨）」に選択されていることを確認することだけです。

あとは、ページ下部にある「保存して最適化」ボタンをクリックするだけです。

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

おめでとうございます！Googleフォントはローカルホストされました。ウェブサイトの読み込みが速くなり、ヨーロッパの訴訟リスクを軽減しました。

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

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

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

フォントのWeb形式がない場合は、FontSquirrel Webfontジェネレーターを使用して変換できます。

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

テーマまたは子テーマのディレクトリに「fonts」という名前の新しいフォルダを作成し、そこにアップロードする必要があります。

フォントをアップロードしたら、カスタムCSSを使用してテーマのスタイルシートにフォントを読み込む必要があります。コードをテーマのstyle.cssファイルに直接追加するか、テーマカスタマイザーの追加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でローカルフォントをホストしてウェブサイトを高速化する方法を学んでいただけたことを願っています。WordPressでフォントを使用する他のガイドも参照することをお勧めします。

• Webセーフフォントとは？ + おすすめのWebセーフフォント19選
• WordPressテーマのフォントを変更する方法（簡単な方法）
• WordPressでフォントサイズを簡単に変更する方法
• WordPressにカスタムフォントを追加する方法
• Google フォントをプライバシーに配慮したものにする方法
• WordPressサイトでGoogleフォントを無効にする方法
• WordPressテーマにアイコンフォントを簡単に追加する方法
• デザインを改善するための最高のWordPressタイポグラフィプラグイン

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。