WordPressでローカルにGoogleフォントを読み込む方法:GTmetrix、Pingdom、およびGoogle PageSpeed Insightsにある最適化アイテム

WordPressサイトに Googleフォント エラー GTmetrix/Pingdom, ローカルでGoogle Fontsをロードすると修正されます.


一部の外部リソースとスクリプトを制御できないため、それらを圧縮、縮小、または最適化することができません。これはWordPressの速度に深刻な影響を与える可能性があります。最も一般的な外部リソースの1つはGoogleフォントです。 WP RocketやWP Fastest Cacheなどのキャッシュプラグインをすでに設定している場合は、グレードや読み込み時間に影響を与えるフォントなどの外部リソースに気付く可能性があります。ここで、Google Fontsをローカルにロードすることが役立ちます。これにより、キャッシュプラグインがカスタムフォントに関連するすべてのリソースを圧縮できるようになります.

変更を加える前に、サイト(または少なくとも編集中のファイル)の完全なバックアップを取ります.

Google-Fonts-GTmetrix

ステップ1:Googleフォントを選択する

この例では、 Robotoフォント 2つのフォントの太さ:通常(400)と太字(700).

Google-Fonts-Selection

より少ないGoogleフォントを使用– Googleフォントを最小限に抑える(フォントが少ない=リクエストが少ない).

フォントの太さを選択する– ウェイトの数もロード時間に影響します。太字バージョンのみが必要な場合は、他のウェイトをオフにして、Google Fontsが必要なウェイトのみをロードするようにします.

ステップ2:フォントをダウンロードする

準備ができたらフォントをダウンロードします。 Googleはすべてのフォントの太さを自動的にダウンロードするため、この手順ではフォントの太さを選択する必要はなく、代わりに手順3で必要になります.

Google-Fonts-Download

ステップ3:フォントをWebフォントに変換する

次に、これらのフォントファイル(.ttf)をWebフォントファイルに変換します。使用します トランスフォント. 彼らのサイトに行き、クリック フォントを追加, その後 ウェブサイトで使用するフォントタイプのみをアップロードする. 私は使っています Roboto-Regular.ttf そして Roboto-Bold.ttf だから私は通常と太字の両方の重みを持っています。 WOFFとWOFF2はすべての主要なブラウザーに対応しているため、設定はデフォルトのままにします。今すぐ変換をクリックします.

Transfonter-Google-Font-Conversion

ウェブサイトで使用するフォントタイプのみを選択してください…

Google-Fonts-Conversion-Selection

手順4:変換されたフォントファイルをダウンロードする

フォントが変換されたら、ダウンロードできます。 zipファイルでは、各フォントにWOFFおよびWOFF2形式が含まれます(2つのフォントをダウンロードしたため、合計4つのフォントファイルがあります)。.

WOFF-Google-Font-Conversion

ステップ5:フォントファイルをWordPressファイルにアップロードする

FTPまたはcPanelを介して、理想的には wp-content / uploads フォルダーとテーマとコアの更新がそれらを上書きしないようにします。 「フォント」フォルダを作成し、そこにアップロードしました(他のファイルと区別するため)。それらが正常にアップロードされ、正しいリンクがあることを確認するには、ブラウザーでリンクを開くと、フォントのダウンロードが開始されます。.

例:

  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff2

交換する yourwebsite.com 独自のWebサイト(およびSSLを使用している場合はHTTPS)。理想的には、4つのリンクすべてをテストし、URLが正しいことを確認します(また、どこかに保存してください)。.

ステップ6:CSSにカスタムフォントを追加する

次に、ダウンロードしたzipファイル内に取得したCSSを追加します。 stylesheet.css. これは、フォントを既存のCSSに接続して使用できるようにするCSSコードです.

CSSコードの配置場所は主観的ですが、外部スタイルシートまたはWordPressを使用できます。 wp_enqueue_style functions.phpの関数、または style.css ファイル(または custom.css 持っている場合)。テーマのデフォルトのstyle.cssファイルに貼り付けます。コードをコピーしてスタイルシートに貼り付け、相対URLを絶対URLに変更します。.

stylesheet.cssのデフォルトURL:
src:url( ‘Roboto-Bold.woff2’)format( ‘woff2’),
url( ‘Roboto-Bold.woff’)format( ‘woff’);

これらを次のように変更します。
src:url( ‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2 ‘)format(’ woff2 ‘),
url( ‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff ‘)format(’ woff ‘);

基本的に、フォントのファイル名の前にフォルダーのURLを含めるだけです.

これはオプションですが、必要に応じて、カスタムクラスを作成して、既存のHTMLでフォントを簡単に使用できます。ここでクラスに名前を付けました roboto_font そして roboto_bold_font. これを行うには、これを(上記のコードの後に​​)style.cssファイルに追加します。

.roboto_font {

font-family:「Roboto」、「Arial」、sans-serif;

}

.roboto_bold_font {

font-family:「Roboto」、「Arial」、sans-serif;

font-weight:太字;

}

ステップ7:フォントをテストする

次に、テストページを作成し、次のコードを テキストエディタ

テスト中

カスタムフォントテスト

カスタムフォントテスト

Google-Fonts-Testing

ページをプレビューします。正しく実行すると、新しいカスタムフォントが表示されます。最初の見出しはWebサイトのデフォルトのフォント、2番目と3番目は追加したGoogle Fontsフォントです。

ローカルGoogleフォント

ステップ8:デフォルトのフォントを設定する

これをWebサイトのデフォルトのフォントにするには、このCSSをstyle.cssファイルに追加します。

体 {

font-family:「Roboto」、「Arial」、sans-serif;

}

注意してください!すでにカスタムフォントがある場合、正しく表示されない可能性があり、既存のフォントファミリプロパティをデバッグまたは編集して、代わりにこのフォントファミリプロパティと置き換える必要があります。.

ステップ9:常にフォントのフォールバックを使用する

Google Fontをfont-familyとして適用することは悪い習慣です。代わりに、Arial、Times New Romanなどの一般的なフォントを含む複数のフォントを指定する必要があります。これにより、フォントが読み込まれないか、読み込みに時間がかかる場合に備えて、ブラウザはこれらのフォントにフォールバックできます。.

フォールバックなし:
font-family: ‘ロボト’;

代替フォントあり:
font-family: ‘Roboto’, Arial, サンセリフ;

これで、Googleフォントの読み込みに失敗した場合、ブラウザはArialフォントまたはシステムのデフォルトのsans-serifフォントタイプにフォールバックし、フォントのレンダリングに問題を引き起こしません.

ウェブサイトを再テストする(GTmetrix内)

Google Fontsエラーは表示されません…

New-GTmetrix-Report.png

質問がありますか?私に電話をかけて.

よくある質問

✅ Google Fontsをスピードアップするには?

Google Fontsを組み合わせてローカルでホストし、それらを事前に接続して設定すると、読み込み時間を短縮できます。 GTmetrixウォーターフォールをチェックしてフォントのベンチマークを取得し、最適化後に再テストします.

✅フォントをWebフォントファイルに変換する方法?

トランスフォンターを使用.

✅ Elementorカスタムフォントについて?

Elementor Custom Fontsは、Google Fontsをローカルでホストすることもでき、Elementor Proに組み込まれています。これを使用してフォントファイルをアップロードできます.

✅フォントの最適化に役立つプラグイン?

WP Rocket、OMGF、Autoptimize、およびPerfmattersはすべて、フォントの最適化に役立ちます.

✅フォントのプリフェッチと事前接続についてはどうですか?

これらは、ブラウザーがフォントをよりよく予測できるようにすることで、フォントを高速化できます。フォントのプリフェッチと事前接続にはKinstaのPerfmattersプラグインを使用しますが、WP RocketまたはPre Party Resource Hintsプラグインを使用することもできます.

乾杯,
うさま

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map