WordPressサイトでGoogleFontsを無効にする方法は？

公開: 2021-10-01

商用テーマを使用すると、WordPressサイトは美しく見えます。これらのプレミアムテーマは、サムネイル画像と見栄えの良いフォントを使用して魅力的な外観を作成します。ただし、クールな外観には、サイト所有者としてのあなたが負担する必要のある一定のコストが伴います。以前の記事では、サムネイルの問題について説明しました。そしてこの記事では、フォントの問題とWordPressサイトでGoogleFontsを無効にする方法を探りましょう。

WordPressでのフォントの使用

以下は、WordPressでフォントを使用する一般的な方法であり、必要に応じていつでもフォントの使用方法を切り替えることができます。

GoogleFontsなどのサードパーティフォントを使用する
サーバーでカスタムフォントをホストする
システムフォントの使用

使用方法は何でも。フォントファミリーを使用するには、次の3つが必要です。

woff、eot、ttf、svgなどのさまざまな拡張子を持つフォントファイル。 1つのファイルが主に使用されますが、残りのファイルはフォールバックと互換性の目的で使用されます。または、特にGoogle Fonts Webサイトからロードする場合は、CSSフォントファイルを使用できます。
ファイルからサイトにフォントをインポートします。 CSSフォントのインポートは以前は一般的でしたが、現在ではヘッダーセクションで外部フォントファイルをリンクするのが一般的です。
HTML要素でCSSルールを使用して、フォントファミリやその他のプロパティについて言及します。

これは、ヘッダーセクションに通常の400の重みを持つRobotoファミリーを使用するための外部ファイルリンクを使用するCSSの例です。

 <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

以下は、HTMLのH1見出しでRobotoフォントファミリを使用する方法です。

 h1 { font-family: 'Roboto', sans-serif; }

ページ上の各HTML要素には、ブラウザでの表示を意図したとおりにレンダリングするためのフォントファミリが必要であると言われています。

WordPressのGoogleFonts

ページ全体が同じフォントを使用するように、HTML本文要素のフォントファミリを宣言するのが一般的です。ただし、これらの見栄えの良いテーマは、見出し、ブロッククォート、事前フォーマット、表、ボタンなどの要素に異なるフォントファミリを使用する必要があります。複数のフォントの設計やライセンス費用の支払いを回避するために、多くのWordPressテーマおよびプラグイン開発者は無料のサードフォントを使用します。パーティーフォント。ここに、Googleから人気のあるGoogle Fontsの使用と、サイトの訪問者の近くにフォントファイルを配信するCDN容量があります。

10の商用WordPressテーマのうち約7つがGoogleFontsを使用し、カスタムテーマパネルを提供しています。利用可能な1250以上のフォントファミリの1つから選択できます。無料で使用できる種類は多数あるため、開発者は必要なGoogleFontsファイルをヘッダーセクションのファミリと重量の詳細にリンクするだけで済みます。サイトのソースコードを確認することで、サイトのGoogleFontsファイルを表示できます。

フォントがfonts.googleapis.comサーバーから読み込まれていることがわかります。 Open SansとRobotoはフォントファミリであり、400/600はフォントの太さを示します。 fonts.gstatic.comなどのGoogleドメインからフォントが読み込まれている場合もあります。

複数の外部フォントを使用する際の問題

WordPressでGoogleFontsを使用すると、次の問題が発生します。

サードパーティのリソースは、サイトのページ読み込み速度に影響します。例としては、Google Fonts、Analyticsトラッキング、FacebookPixelsなどがあります。
複数のフォントファミリとフォントの太さを使用すると、Googleサーバーから必要な外部ファイルの数が増えます。これにより、サイトから送信されるHTTPリクエストの数が増え、ページの読み込み速度が低下します。
ブラウザは、Googleサーバーからすべてのフォントファイルをダウンロードするまでテキストをロードしません。これには時間がかかる場合があり、その間、ユーザーには空白の空のページが表示されます。 Google PageSpeed Insightsツールに警告が表示され、Webフォントの読み込み中にテキストが表示されるようになります。
サイトの読み込みを高速化するために、GoogleFontsドメインに接続するために事前接続とDNSプリフェッチを使用する必要がある場合があります。

速度はGoogle検索の公式ランキング要素の1つであるため、サードパーティのGoogleFontsの使用を回避する他のオプションはありません。

WordPressでGoogleFontsを無効にする方法は？

ページの読み込み速度を向上させるには、WordPressでGoogleFontsを無効にする必要があることが明らかになりました。ただし、問題は、テーマとプラグインがGoogle Fontsを使用している場合に、サイトの外観に影響を与えるかどうかに関係なく、それをどのように行うかです。以下はあなたが利用できるオプションです。

サイトがブラウザのフォールバックフォントを使用するように、GoogleFontsを完全に無効にします。
スワップパラメータをGoogleFontsファイルに追加し、引き続き使用します。
カスタムCSSを追加するか、テーマを変更して、システムフォントを使用します。

次のセクションでは、これらすべてのオプションについて説明します。

＃1-WordPressでGoogleFontsを完全に無効にする

Google Fontsが速度の問題になると、ほとんどすべてのキャッシュおよび速度最適化プラグインは、サイトからGoogleFontsを結合または削除する機能を提供します。私たちがお勧めする最良のオプションは、膨満感を取り除くためのオプションの完全なセットが付属しているPerfmattersプラグインを使用することです。たとえば、WooCommerceプラグインを使用している場合は、数回クリックするだけで投稿やページのWooCommerceスタイルとスクリプトを無効にできます。

Perfmattersプラグインを購入してサイトにインストールします。
「設定>パフォーマンス」メニューに移動します。
[オプション]タブの[フォント]セクションに移動します。
「GoogleFontsを無効にする」オプションに対してボタンを有効にします。
「変更を保存」ボタンをクリックして、変更を適用します。

プレミアムプラグインを使用したくない場合は、ダッシュボードの[プラグイン]> [新規追加]セクションに移動し、[GoogleFontsの無効化と削除]プラグインをインストールします。これは無料の専用プラグインで、サイトのGoogleFontsを完全に削除するための作業は1つだけです。

驚くべき部分は、プラグインに迷惑な設定ページがないことです。必要なのは、サイトにインストールしてアクティブ化することだけです。

他の無料オプションには、キャッシュオプションと一緒に役立つAutoptimizeが含まれます。 SiteGroundホスティングを使用している場合は、SG Optimizerプラグインを使用してすべてのGoogleフォントを組み合わせ、HTTPリクエストの数を減らします。

＃2 –Googleフォントの表示を入れ替える

上記のように、Google Fontsを使用しない主な理由の1つは、テキストコンテンツの読み込みが遅れることです。これを処理するには、次のようなCSSプロパティを使用できます。

外部フォントファイルを使用する場合：

 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

CSS @importで使用する場合：

 <style> @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); </style>

最近、GoogleはCSS font-display：swapプロパティとGoogleFontsのサポートを導入しました。これは基本的に、Google Fontsファイルが利用可能になるまで、最初にデフォルトのブラウザのフォントを使用するようにブラウザに指示できることを意味します。ブラウザがGoogleFontsファイルのダウンロードを完了すると、表示が入れ替わり、GoogleFontsが使用されます。このようにして、テキストコンテンツの表示に遅延は発生しません。これは、Google PageSpeedInsightsツールでのWebフォントの読み込み中にテキストが表示されたままになるなどの問題を修正するのに役立ちます。

フォントスワッピングを実装するには、Swap Google FontsDisplayプラグインを使用できます。このプラグインにも設定はありません。必要なのは、サイトでプラグインをアクティブ化して、すべてのGoogleFontsファイルにdisplay = swap値を追加することだけです。

＃3 –システムフォントを使用する

最近、WordPressテーマの多くは、GoogleFontsとともにシステムフォントスタックを使用するオプションを提供しています。たとえば、GeneratePressなどの一般的な軽量テーマをこの目的に使用できます。必要なのは、カスタマイザー設定でシステムフォントオプションを選択することだけです。

サイトでシステムフォントを手動で使用する場合は、[外観]> [カスタマイズ]> [CSSの追加]セクションに次のCSSを追加するだけです。このCSSはbody要素専用であり、必要に応じて宣言に他の要素を追加する必要がある場合があります。さらに、他のCSSインポートまたはファイルリンクを手動で削除して、それらのフォントファイルも読み込まれないようにする必要があります。

 body { font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

これは簡単なオプションですが、システムフォントを使用する場合、すべてのデバイスで固定フォントが表示されるわけではありません。

最後の言葉

どの方法を使用する場合でも、ソースコードにGoogleFontsファイルが含まれていないことをサイトでテストしてください。スワップオプションを使用している場合は、フォントのCSSファイルにdisplay = swapプロパティが含まれていることを確認してください。さらに、Google PageSpeed Insightsツールを使用してサイトをテストし、フォント関連の警告がないことを確認します。