WordPressでGoogle Fontsを使うのは簡単です。Google Fontsは、ウェブサイトで使用できる800種類以上のウェブフォントを無料で提供するサービスです。Google Fontsは、ウェブサイトの外観と使いやすさを向上させるために、何百万ものWordPressウェブサイトで利用されている、評価の高い無料サービスです。ここでは、サイトのパフォーマンスを損なうことなく、 PageSpeed スコア
方法1: WordPressサーバーでGoogle Fontsをホストする
ステップ1：Googleフォントを選択する
使用する Google Fonts が少なくなると、リクエストも減ります (フォントが減る = リクエストも減ります)。.
フォントの太さは慎重に選択してください。 使用するフォントの太さの数は、ページの読み込み速度にも影響します。Google Fontsが必要な太さだけを読み込むようにするには、不要な太さのチェックを外し、必要な太さだけが表示されるようにしてください。
ステップ2：フォントをダウンロードする
フォントのダウンロードは、このプロセスの2番目のステップです。Googleはすべてのフォントウェイトを自動的にダウンロードするため、この段階でフォントウェイトを選択する必要はありません。フォントウェイトの選択は、ステップ3で必要になります。.
ステップ3：フォントをWebフォントに変換する
サイトの「フォントを追加」ボタンをクリックし、ウェブサイトで使用するフォントのみを選択してアップロードしてください。roboto-regular.ttfファイルとroboto-bold.ttfファイルなので、両方のウェイトが含まれています。WOFFとWOFF2は主要なブラウザをすべてカバーしているので、設定はそのままにしておいてください。「変換」ボタンをクリックして変換プロセスを開始します。.
ステップ4: 変換されたフォントファイルをダウンロードする
フォントの変換が完了したら、ダウンロードできます。2つのフォントがコンピューターにダウンロードされたため、ZIPファイルには合計4つのフォントファイルが含まれます（2つのフォントをダウンロードしたため、ZIPファイルには4つのフォントファイルが含まれます）。.
ステップ5: フォントファイルをWordPressファイルにアップロードする
ウェブフォントファイルはFTPまたは cPanelで、理想的にはwp-content/uploadsフォルダにアップロードしてください。弊社ではフォントを「fonts」フォルダにアップロードしました（他のファイルとは分離するため）。ブラウザでリンクを開くとフォントがダウンロードできるようになっているので、アップロードが成功したことを確認できます。
ステップ6: CSSにカスタムフォントを追加する
zipファイルをダウンロードしたら、ファイルにstylesheet.css CSSを追加します。以下のCSSコードでフォントを既存のCSSに接続し、使用できるようになります。.
CSSコードはfunctions.php内に記述するか、style.cssファイルから開始できます。CSSコードでは、外部CSSファイルまたはWordPressのwp_enqueue_style関数を使用できます。テーマのデフォルトのstyle.cssファイルに貼り付けます。コードをスタイルシートにコピー＆ペーストして、相対URLを絶対URLに置き換えてください。.
stylesheet.css 内のテーマのデフォルト URL:
src: url('Roboto-Bold.woff2') フォーマット('woff2'),
url('Roboto-Bold.woff') フォーマット('woff');
変更後:
ソース: url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff2') フォーマット('woff2'),
url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff') フォーマット('woff');
現在の HTML でフォントを簡単に使用するには、カスタム クラスを作成します。CSS クラス roboto_font および roboto_bold_font。
.roboto_font {
フォントファミリー: “Roboto”, “Arial”, sans-serif; }
.roboto_bold_font {
フォントファミリー: “Roboto”, “Arial”, sans-serif;
フォントの太さ: 太字;
}
ステップ7: デフォルトのフォントを設定する
このフォントを Web サイトのデフォルト フォントにするには、style.css ファイルに CSS コードを含める必要があります。.
既存のフォント ファミリ プロパティを置き換えるには、フォントをデバッグまたは編集する必要がある場合があります。.
次のステップは、取得したstylesheet.cssファイルをstylesheet.cssというファイルにアップロードし、CSSを追加することです。以下のCSSコードにより、フォントが既存のCSSと連携し、入力後すぐに使用できるようになります。外部スタイルシートを使用するか、WordPressのwp_enqueue_style関数を使用してスタイルシートをキューに登録できます。.
方法2：Webフォントをプリロードする - スクロールせずに見える範囲の最適化
Google Fonts をご利用の場合は、Google が作成し、Google サーバーから WordPress ウェブサイトに送信されたスタイルシートを参照する必要がある場合があります。Google Chrome が提供する開発者ツールを使用してウェブサイトを検査すると、舞台裏のプロセスを垣間見ることができる場合があります。ソース内に Google Fonts のエントリが 2 つ表示される場合があります。.
ここに添付されている画像をご覧ください。.
をクリックすると fonts.googleapis 、URL を生成したスタイルシートが開いているページに表示されます。さらに、font-face 宣言ごとに特定のフォントファイルが呼び出されます。
これは、異なるフォントウェイトが使用されている場合、ユーザーが fonts.gstatic.com 必要なフォントウェイトを取得する必要があることを示しています。この手順により、WordPressページの読み込み時間が長くなる可能性があります。
したがって、現在のテーマの functions.php ファイルにアクセスし、フォントの管理を担当する関数内に次の PHP コードを入力します。.
関数twentyeleven_resource_hints($urls, $relation_type) {
if ( wp_style_is( 'rumi-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
$urls[] = 配列(
'href' => 'https://fonts.gstatic.com',
「クロスオリジン」
);
}
$urls を返します。
}
add_filter( 'wp_resource_hints', 'twentyeleven_resource_hints', 10, 2 );
方法3：プラグインを使用してGoogle Fonts WordPressを最適化する
WordPress関連のほとんどのタスクと同様に、プラグインを使うとGoogle Fontsの最適化がはるかに簡単になります。さらに、プラグインはソフトウェア面の作業も自動的に処理してくれるので、コードがシステム内のどこに配置されるべきかを気にする必要がありません。.
WordPress ウェブサイトに Google Fonts をインストールし、PageSpeed Insights または GTmettrix を使用してパフォーマンス テストを実行すると、次のエラー メッセージが表示されます: fonts.googleapis.com。.
これは、Google FontsがWordPressプラットフォームと互換性がないために発生します。WordPressサイトでGoogle Fontsを最適化する必要があることを示しています。.
この問題の解決には、無料のプラグインを使用できます。それは「 OMGF | Host Google Fonts Locally」
インストールが完了すると、プラグインはWordPressのwp en queue script()Google Fontsメソッドをwp head()関数に切り替え始めます。このプラグインはすべてを自動で行います。.
で同様の記事をもっとご覧ください Seahawk Media。
