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

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

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

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

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）は、共通設定よりも優先して適用されます。

Google Fontsを追加する手順

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

本文（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 と、階層に応じて段階的に小さくなるよう設計されています。

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

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;
	}
);

よくある質問