Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

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

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

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

How to Host Local Fonts in WordPress for a Faster Website

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をローカルにホスティングされたコピーに自動的に置き換えるだけでよいという記述に注目してください。

OMGF Settings

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

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

Click the Save & Optimize Button

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

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

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

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

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

Downloading a Google Font

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

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

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

Upload the Fonts to Your Website

フォントをアップロードしたら、カスタム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フォントが使われています。

Adding Custom CSS With the Theme Customizer

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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

7件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

    • WPBeginner Support says

      If you use the plugin, we would not recommend removing it to keep the fonts on your site.

      管理者

    • WPBeginner Support says

      If you are using the plugin then we would recommend keeping the plugin active.

      管理者

  2. Liz S says

    Don’t you also have to make some change to the functions.PHP file to add the new fonts so they show up in the customizer?

    • WPBeginner Support says

      If you are using the manual method you would need to edit your theme’s CSS which we cover in the second method :)

      管理者

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。