WordPressで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ファイルにアップロードする
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 | Google Fontsをローカルでホストする方法
インストールが完了すると、プラグインはWordPressのwp en queue script()Google Fontsメソッドをwp head()関数に切り替え始めます。このプラグインはすべてを自動で行います。.
Seahawk Mediaで同様の記事をもっとご覧ください。
