WordPress で Google Fonts を使う方法は、ブロックテーマなら「フォントライブラリ」から追加する方法、クラシックテーマなら子テーマの functions.php で wp_enqueue_style() を使って読み込む方法が基本です。この記事では、テーマの種類ごとの手順と、日本語フォントで重くなりやすい点への対処、反映されたかの確認方法を説明します。
管理画面の項目名はバージョンによって変わることがあるため、（2026年10月現在）の一般的な表記で書いています。
先に決めておくこと：外部読み込みか、自サイトに置くか
Google Fonts の使い方は大きく二つあります。
- 外部読み込み：Google のサーバー（fonts.googleapis.com / fonts.gstatic.com）からフォントを配信してもらう
- セルフホスト：フォントファイルを自分のサーバーに置いて配信する
外部読み込みは設定が簡単で、日本語フォントも文字の範囲ごとに分割して配信されるため、ページで使う部分だけが読み込まれます。一方で、訪問者のブラウザが Google のサーバーに接続するため、海外ではプライバシーの観点から問題視された判決例もあります。プライバシーポリシーとの整合を重視するサイトや、外部サーバーへの依存を減らしたいサイトではセルフホストが向いています。
どちらを選んでも、テーマのファイルを直接編集するのは避けてください。親テーマを更新すると変更が消えます。コードを書く場合は子テーマで作業し、作業前にテーマファイルのバックアップを取っておきます。
ブロックテーマ：フォントライブラリから追加する
WordPress 6.5 以降のブロックテーマでは、サイトエディターにフォントライブラリが用意されています。「外観 > エディター > スタイル」を開き、タイポグラフィの項目からフォントの管理画面へ進みます。
フォントの管理画面には、インストール済みのフォント、ファイルのアップロード、Google Fonts からの追加といったタブが並びます。Google Fonts のタブを初めて開くと、Google のサーバーへ接続することへの同意を求められます。許可すると一覧からフォントを検索でき、必要な太さ（ウェイト）だけを選んでインストールできます。
ここで覚えておきたいのは、フォントライブラリ経由で追加した Google Fonts は、フォントファイルがサイトのサーバー（通常はアップロード用フォルダ内の fonts ディレクトリ）にダウンロードされ、そこから配信されることです。つまり、操作は Google Fonts から選ぶだけですが、結果としてはセルフホストになります。
インストールしたら、同じ「スタイル > タイポグラフィ」で、本文や見出しに使うフォントとしてそのフォントを選びます。インストールしただけではどこにも適用されません。
日本語フォントは一つのウェイトでもファイルが大きくなりがちです。Noto Sans JP などを入れる場合、本文用と太字用の二つ程度に絞るのが無難です。
ブロックテーマ：theme.json で指定する（子テーマ向け）
テーマとして配布する場合や、設定をファイルで管理したい場合は、子テーマの theme.json にフォントを登録できます。フォントファイルを子テーマ内の assets/fonts/ に置き、fontFace で参照します。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"typography": {
"fontFamilies": [
{
"name": "Noto Sans JP",
"slug": "noto-sans-jp",
"fontFamily": "\"Noto Sans JP\", sans-serif",
"fontFace": [
{
"fontFamily": "Noto Sans JP",
"fontWeight": "400",
"fontStyle": "normal",
"src": [ "file:./assets/fonts/NotoSansJP-Regular.woff2" ]
}
]
}
]
}
},
"styles": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--noto-sans-jp)"
}
}
}file:./ は theme.json があるテーマフォルダからの相対パスを表します。登録したフォントは --wp--preset--font-family--{slug} という CSS 変数としても出力されるので、追加 CSS からも同じ名前で参照できます。フォントファイルの利用条件は、配布元のライセンス（Google Fonts の多くは SIL Open Font License）を確認してください。
クラシックテーマ：wp_enqueue_style() で読み込む
クラシックテーマでは、子テーマの functions.php に読み込み処理を書きます。<link> タグを header.php に直書きする方法もありますが、読み込み順の管理やキャッシュ系プラグインとの相性を考えると、wp_enqueue_scripts フックを使うほうが扱いやすいです。
<?php
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style(
'my-google-fonts',
'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap',
array(),
null
);
} );第4引数の null には意味があります。バージョンを指定すると WordPress が URL の末尾に ver= を付けますが、その処理の過程で、複数のフォントを family= を重ねて指定した URL が崩れることがあります。null にするとバージョン文字列が付かないため、Google Fonts の URL がそのまま出力されます。
display=swap は、フォントの読み込みが終わるまで代替フォントで文字を表示させる指定です。これがないと、回線が遅い環境で文字が一時的に見えなくなることがあります。
読み込んだら、子テーマの style.css でフォントを指定します。
body {
font-family: "Noto Sans JP", sans-serif;
}外部読み込みを少し速くする：preconnect
外部読み込みの場合、ブラウザは CSS を取得してから、さらに別のドメインへフォント本体を取りに行きます。wp_resource_hints フィルターで事前接続を指定しておくと、待ち時間を少し減らせます。
<?php
add_filter( 'wp_resource_hints', function ( $urls, $relation_type ) {
if ( 'preconnect' === $relation_type ) {
$urls[] = array(
'href' => 'https://fonts.gstatic.com',
'crossorigin' => 'anonymous',
);
}
return $urls;
}, 10, 2 );フォント本体は crossorigin 付きで取得されるため、事前接続にも同じ属性が必要です。属性がないと接続が使い回されず、効果が出ません。
クラシックテーマでセルフホストにしたい場合は、フォントファイルを子テーマに置いて @font-face を自分で書くか、OMGF（Optimize My Google Fonts）のように Google Fonts をローカル配信に切り替えるプラグインを使う方法があります。プラグインの設定項目はバージョンで変わるため、導入時に公式の説明を確認してください。
反映されたかを確認する
見た目だけでは、指定したフォントで表示されているのか、似た代替フォントなのかを区別しにくいです。ブラウザの開発者ツールで確認します。
- ネットワークタブを「Font」で絞り込み、woff2 ファイルが読み込まれているかを見る
- 要素を選択し、計算済みスタイル（Computed）の下部にある実際に描画されたフォント名を見る
- 読み込まれていない場合は、ページのソースで Google Fonts の
<link>が出力されているかを確かめる
<link> が出ていない場合は、子テーマが有効になっているか、functions.php に構文エラーがないかを確認します。出ているのに適用されない場合は、テーマ側の CSS がより詳細なセレクターで別のフォントを指定している可能性があります。変更が見えないときは、キャッシュ系プラグインとブラウザのキャッシュも削除してください。
まとめ
- ブロックテーマはフォントライブラリから Google Fonts を追加でき、ファイルはサイトのサーバーから配信されます。追加後に「スタイル > タイポグラフィ」で適用先を選びます
- ファイルで管理したい場合は、子テーマの theme.json の
fontFamiliesとfontFaceで登録します - クラシックテーマは子テーマの functions.php で
wp_enqueue_style()を使い、バージョン引数をnullにします - 日本語フォントはウェイトを絞り、外部読み込みでは
display=swapと preconnect を設定します - 反映確認は開発者ツールのネットワークタブと、実際に描画されたフォント名で行います