フォントライブラリのフォントが選択肢に出てきません

A. 次の3点をご確認ください。 (1) WordPressが7.0以降であること（6.6〜6.9では連携されません） (2) Apuraが1.4.1以降であること (3) フォントライブラリでフォントをインストールしただけでなく有効化していること。インストール済みでも未有効のフォントは選択肢に追加されません。

日本語フォントは使えますか？

A. はい。Google Fontsの選択肢に「Noto Sans JP」「Noto Serif Japanese」「IBM Plex Sans JP」「Kiwi Maru」などの日本語対応フォントが含まれています。日本語フォントはデータ量が大きいため、使うウェイトを必要最小限に絞ると表示速度を保ちやすくなります。

見出しだけ別のフォントにできますか？

A. できます。Body TypographyとAll Headings Typographyでそれぞれ別のFont Familyを指定すれば、本文と見出しで異なるフォントを使えます。見出しに個性的なフォント、本文に読みやすいフォントを組み合わせるのが定番です。

モバイルだけ文字を小さくしたいです

A. 各タイポグラフィ設定にはタブレット・モバイル用のFont Size欄があります。モバイルの欄にだけ小さい値を入力すれば、デスクトップ表示はそのままにモバイルだけ調整できます。空欄のままにすればデスクトップの値が継承されます。

Apuraのタイポグラフィ設定完全ガイド｜Google Fontsで読みやすく

「サイトの文字が読みづらい」「ブランドに合ったフォントを使いたいけど、CSSを書くのは難しそう…」と感じていませんか？

Apuraテーマなら、カスタマイザーからGoogle Fontsの導入や本文・見出しの文字サイズ、行間、太さまで、コードを書かずに細かく調整できます。

この記事では、フォントの追加方法から、本文・見出しごとの設定、レスポンシブ対応、そして開発者向けのCSS変数・フィルター活用まで、ステップごとに解説します。

なお、記事中のフォントライブラリ連携はApura v1.4.1以降かつWordPress 7.0以降で利用できます。WordPress 6.6〜6.9をお使いの場合は、これまでどおりGoogle Fontsの設定のみが有効です（保存済みの設定はそのまま引き継がれます）。

Apuraのタイポグラフィ設定でできること

Apuraのタイポグラフィ設定は、カスタマイザーの「Typography」パネルにまとまっています。サイト全体のフォントファミリー（Google Fonts）の読み込みから、本文・見出しそれぞれの文字スタイルまで、プレビューを確認しながら調整できるのが特長です。

設定できる項目は大きく次の4つに分かれます。

設定グループ	内容
Google Fonts	使用するGoogle Fontsを選択し、ウェイト（太さ）やスタイルを読み込む
Body Typography	本文のフォントサイズ・太さ・行間を設定
All Headings Typography	H1〜H6すべての見出しに共通するフォント・太さ・行間を設定
H1〜H6 Typography	見出しレベルごとに個別のフォントサイズなどを設定

見出しのフォントは、まずAll Headings Typographyで全体の方向性を決め、必要に応じてH2やH3などを個別に調整するのが効率的です。個別設定（H1〜H6）は、共通設定よりも優先して適用されます。

Apura 1.4.1以降では、フォントの入手先がもう1つ増えました。WordPress 7.0以降でフォントライブラリに登録し、有効化したフォントが、Body TypographyやH1〜H6のFont Family選択肢に自動で並ぶようになっています。

そのため、Font Familyのプルダウンは次の4グループで構成されます。上から順に確認すると、目的のフォントを見つけやすくなります。

グループ	内容
Inherit	親要素のフォントを継承する（見出しの初期値）
System Fonts	端末に標準搭載されたフォント。追加の読み込みが発生しない
Google Fonts	「Google Font Settings」で追加したフォント
Font Library	WordPressのフォントライブラリで有効化したフォント（WordPress 7.0以降・Apura 1.4.1以降）

Google Fontsを追加する手順

まずはサイトで使うフォントを読み込みます。Apuraでは、あらかじめ用意されたGoogle Fontsのリストから選ぶだけで、必要なCSSが自動的に出力されます。日本語に対応した「Noto Sans JP」「IBM Plex Sans JP」「Kiwi Maru」なども選択できます。

カスタマイザーを開く

WordPress管理画面から「外観 → カスタマイズ」を選択し、カスタマイザーを開きます。
Typographyパネルを開く

左パネルの「Typography」をクリックします。Google Fontsの設定欄が表示されます。
フォントを選択する

「Google Fonts」から使用したいフォント名を選びます。フォントを追加すると、そのフォントが本文・見出しの「Font Family」の選択肢にも表示されるようになります。
公開して反映する

プレビューで表示を確認し、問題なければ「公開」をクリックします。選択したフォントは https://fonts.googleapis.com/css2 から display=swap 付きで読み込まれ、表示の遅延を最小限に抑えます。

読み込むフォントやウェイトを増やすほど、ページの読み込み速度には影響します。実際に使う太さ（例：本文400・見出し600）だけに絞ると、表示速度と読みやすさのバランスを取りやすくなります。

Apura 1.4.1では、この読み込み処理に重複防止の仕組みが入りました。Google Font Settingsで選んだフォントと同じ書体名のフォントがフォントライブラリ側でも有効になっている場合、そのフォントはGoogle Fonts APIのURLから自動的に除外されます。フォントライブラリが配信するWebフォントと、Google Fontsからの外部読み込みが二重に走るのを防ぐためです。

このとき、Google Font Settingsに保存した内容自体は書き換わりません。フォントライブラリ側でそのフォントを無効化すれば、次の読み込みから従来どおりGoogle Fonts APIで配信されます。「どちらに寄せるか」をあとから切り替えられる設計です。

WordPress 7.0以降：フォントライブラリのフォントを使う

WordPress 7.0で強化されたフォントライブラリは、管理画面から直接Webフォントを追加・管理できる機能です。Apura 1.4.1以降では、ここで有効化したフォントがカスタマイザーのFont Family選択肢に連携されます。

フォントライブラリを開く

フォントライブラリの管理画面を開きます。Apuraはクラシックテーマのため、サイトエディターからは開けません。フォントライブラリに対応した管理プラグインを利用するか、テーマを一時的にブロックテーマへ切り替えて登録してください。
フォントをインストールする

Googleフォントのコレクションから選ぶか、手持ちのフォントファイル（woff2など）をアップロードします。
使うウェイトを有効化する

インストールしただけでは連携されません。使用するウェイト・スタイルにチェックを入れて有効化し、保存してください。Apuraは「有効化され、かつ配信元となるフォントファイルを持つフォント」だけを選択肢に追加します。
カスタマイザーで選択する

「外観 → カスタマイズ → Typography」を開き、Body TypographyやH1〜H6のFont Familyから「Font Library」グループのフォントを選びます。あとは通常の設定と同じく、サイズ・太さ・行間を調整して公開します。

フォントの配信（@font-face の出力）はWordPress本体が担当します。Apuraは選択肢として提示し、選ばれたフォント名をCSS変数に流し込むだけなので、テーマ側で二重にフォントを読み込むことはありません。

Google Fontsとフォントライブラリ、どちらを使う？

	Google Fonts（カスタマイザー）	フォントライブラリ
必要なWordPress	6.6以降	7.0以降
配信元	Google Fonts API（外部）	自サーバー（アップロード時）
使えるフォント	テーマ同梱のGoogle Fontsリストから選択	任意のフォントファイルを追加可能
設定の手軽さ	カスタマイザー内で完結する	対応プラグイン等での事前登録が必要

手早く整えたい場合はGoogle Fonts、外部リクエストを減らしたい場合や独自フォントを使いたい場合はフォントライブラリ、と考えると選びやすくなります。両方を併用しても、同名フォントは自動的に片方へ寄せられるため、設定が競合する心配はありません。

本文（Body Typography）を整える

本文は読者がもっとも長く目にする部分です。Body Typographyでは、次の項目を設定できます。

Font Family：本文のフォント。追加したGoogle Fontsやシステムフォントから選択
Font Size：文字サイズ。デスクトップ・タブレット・モバイルで個別指定が可能
Font Weight：文字の太さ（標準は400）
Line Height：行間（標準は1.6）

初期値では本文サイズはデスクトップで 1rem（16px相当）、モバイルで 0.9375rem（15px相当）、行間は 1.6 に設定されています。日本語の本文は行間をやや広め（1.7〜1.9程度）にすると読みやすくなる傾向があるので、まずはここから微調整するのがおすすめです。

見出し（Headings）を整える

見出しはAll Headings Typography（共通設定）とH1〜H6 Typography（個別設定）の2段構えになっています。

共通設定では、すべての見出しに適用するフォントファミリー・太さ・行間を一括で指定します。初期値はフォント inherit（本文を継承）、太さ 600、行間 1.2 です。一方、個別設定ではH1〜H6ごとに文字サイズを指定でき、初期値はH1が 2rem、H2が 1.5rem、H3が 1.25rem と、階層に応じて段階的に小さくなるよう設計されています。

個別のH2やH3でFont Familyを指定していない場合は、自動的にAll Headings Typographyのフォントが使われます。「見出しは全部まとめて同じフォント、サイズだけ階層で変えたい」というケースに最適な設計です。

レスポンシブ（タブレット・モバイル）対応

Apuraのタイポグラフィ設定は、デバイスごとのフォントサイズ・行間・字間を個別に指定できます。デスクトップではフォントファミリーや太さを含むすべての項目を設定でき、タブレット・モバイルでは「フォントサイズ」「行間」「字間（letter-spacing）」のレスポンシブ項目のみを上書きする仕組みです。

タブレット・モバイルの値を空欄のままにしておけば、デスクトップの設定がそのまま引き継がれます。「モバイルだけ見出しが大きすぎる」と感じたときに、その項目だけを上書きすればよいので、設定がシンプルに保てます。

開発者向け：CSS変数とフィルターの活用

Apuraのタイポグラフィ設定は、最終的にCSSカスタムプロパティ（CSS変数）として出力されます。子テーマで部分的に上書きしたり、開発者がデフォルト値を拡張したりする際に役立ちます。

出力されるCSS変数

本文は --body-font-family / --body-font-size / --body-font-weight / --body-line-height、見出しは --headings-font-family や --h2-font-size といった変数で出力されます。

個別見出しの変数が未設定の場合は、共通設定（--headings-*）にフォールバックします。子テーマでブランドカラーや特定要素だけ微調整したい場合は、これらの変数を上書きします。

/* 子テーマの style.css などで本文と見出しを微調整する例 */
:root {
	--body-line-height: 1.8;   /* 本文の行間を広げて読みやすく */
	--h2-font-size: 1.75rem;   /* H2だけ少し大きく */
}

フィルターで初期値を拡張する

タイポグラフィ設定のデフォルト値は apura_typography_settings_defaults フィルターで変更できます。プラグインや子テーマから、独自の初期値を与えたいときに使います。

<?php
/**
 * タイポグラフィのデフォルト値を上書きする例。
 * 子テーマの functions.php に記述します。
 */
add_filter(
	'apura_typography_settings_defaults',
	function ( array $defaults ): array {
		// 既定の行間を 1.7 に変更する。
		$defaults['line_height'] = '1.7';

		return $defaults;
	}
);

また、カスタマイザーに表示するタイポグラフィ項目そのものを追加・変更したい場合は、apura_customizer_typography_fields フィルターを利用します。配列で渡されるフィールド定義を加工して返すことで、独自のフィールドを差し込めます。

<?php
/**
 * カスタマイザーのタイポグラフィ項目を加工する例。
 *
 * @param array $fields セクションIDをキーとしたフィールド定義の配列。
 * @return array
 */
add_filter(
	'apura_customizer_typography_fields',
	function ( array $fields ): array {
		// 必要に応じて $fields を加工して返す。
		// 値はサニタイズ・エスケープ済みのものを扱うこと。
		return $fields;
	}
);

Apura 1.4.1以降では、有効化されているフォントライブラリのフォント一覧を \Apura\Font_Library::get_active_fonts() で取得できます。

子テーマから「フォントライブラリが使われているときだけ処理を分岐したい」といった場合に利用してください。WordPress 6.9以前では常に空配列が返ります。

<?php
/**
 * フォントライブラリのフォントが有効なときだけ、本文の初期行間を広げる例。
 * 子テーマの functions.php に記述します。
 */
add_filter(
	'apura_typography_settings_defaults',
	function ( array $defaults ): array {
		if ( ! class_exists( '\Apura\Font_Library' ) ) {
			return $defaults;
		}

		$active_fonts = \Apura\Font_Library::get_active_fonts();

		if ( ! empty( $active_fonts ) ) {
			$defaults['line_height'] = '1.8';
		}

		return $defaults;
	}
);

フィルターでフィールドや値を追加する際は、必ずサニタイズ（sanitize_text_field 等）とエスケープ（esc_html 等）を行い、WordPress Coding Standardsに従ってください。ユーザー入力をそのまま出力するのは避けましょう。

get_active_fonts() が返す各要素は label（表示名）・value（CSSのfont-family値）・family（正規化した書体名）の3つのキーを持ちます。テンプレートに出力する場合は、esc_html() や esc_attr() を通してから表示してください。

よくある質問

: 次の3点をご確認ください。

(1) WordPressが7.0以降であること（6.6〜6.9では連携されません）

(2) Apuraが1.4.1以降であること

(3) フォントライブラリでフォントをインストールしただけでなく有効化していること。インストール済みでも未有効のフォントは選択肢に追加されません。
: はい。Google Fontsの選択肢に「Noto Sans JP」「Noto Serif Japanese」「IBM Plex Sans JP」「Kiwi Maru」などの日本語対応フォントが含まれています。日本語フォントはデータ量が大きいため、使うウェイトを必要最小限に絞ると表示速度を保ちやすくなります。
: できます。Body TypographyとAll Headings Typographyでそれぞれ別のFont Familyを指定すれば、本文と見出しで異なるフォントを使えます。見出しに個性的なフォント、本文に読みやすいフォントを組み合わせるのが定番です。
: 各タイポグラフィ設定にはタブレット・モバイル用のFont Size欄があります。モバイルの欄にだけ小さい値を入力すれば、デスクトップ表示はそのままにモバイルだけ調整できます。空欄のままにすればデスクトップの値が継承されます。