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

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

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

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

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

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

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

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

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

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

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

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

1. プラグインを使用してWordPressでローカルフォントをホストする
2. WordPressでローカルフォントを手動でホスティングする
3. WordPress のフォントに関するエキスパートガイド

方法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 generatorを使用して変換できます。

次に、フォントを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でもフォローできます。