SWELLのフォント追加 ベースフォントのプルダウンに足す方法

ブログのフォント変えたくないですか？

SWELLではカスタマイズで「游ゴシック / ヒラギノゴシック > メイリオ / Noto Sans JP / 明朝体 (Noto Serif JP)」の4パターンから選べますが、オリジナリティを出すためにフォントを変えたくなったのでやり方を調べてみました

追加CSSで上書きするのがオーソドックスではありますが管理しにくいし、今後も手軽に変更できるようにカスタマイズ画面にあるプルダウンの選択肢そのものに好きなフォントを足して、選ぶだけで切り替えができる方法にしています

結論としては、子テーマのfunctions.phpにコードを100行ほど足して、プルダウンにGoogleフォントを5つ増やして今はZen Maru Gothicで表示しています

SWELLのベースフォントは4択 フォント追加は2通り

SWELLのベースフォントは、「外観」→「カスタマイズ」→「サイトの全体設定」→「基本デザイン」の中にあるプルダウンで選びます

SWELL公式マニュアルのフォント設定のページも、この中から選ぶ説明だけで、フォントを足す方法は紹介されていませんでした

よく紹介されているのは「head欄+追加CSS」

検索で上位に出てくる方法は、ほぼこのやり方

1. SWELLの「headタグ内に出力するコード」の欄に、Googleフォントの読み込みタグを貼る
2. 「追加CSS」で font-family を指定して上書きする

手順も公開されてますし、方法としてはお手軽です
ただ、フォントを替えるたびにCSSを書き直すし、間違えると競合するとか記述を間違えてうまくいかないことも・・
実際にSWELLのフォーラムにも「指定したのに反映されない」という質問があります

ちなみに、SWELLの本文は var(--swl-font_family) という変数でフォントを受け取っていて、この記事のコードもその変数を書き換える形にしています

この記事で紹介する方法はプルダウンに選択肢を足す

私がやったのは、カスタマイザーのプルダウンに選択肢を足す方法です
一度コードを貼れば、あとはカスタマイザーで選んで公開するだけで切り替えられるので簡単だし比較も簡単

標準の4つに戻すのもプルダウンで選び直すだけで、見比べながら決めたい人にはこちらのほうがおススメ

フォントの選び方 丸文字系でラフ過ぎない

選ぶフォントは個人の好みなのでココは飛ばしてもらって大丈夫ですが、、今回私が選んだ基準は親しみのある丸文字で、ラフ過ぎない雰囲気のもの

丸文字系は、フォントによってはおふざけ感が強くなってしまうので、技術記事が中心のこのブログでVBAやPythonのコードの説明が丸っこい手書き風の字で並んでいたら、ちょっと違う感になってしまう気がしまして

いい塩梅になりそうなフォントをAIチョイスで5個の中で見比べながら一番しっくり来たものにしました

本文と同じ条件の見本で見比べてみた

フォント名と「あいうえお」の見本だけでは、長文にしたときの印象が分かりません
そこで、比較用のページを1枚作りました

• 本文16px・行間1.8(javeo.jpの本文に近い設定)
• 見本は記事風の文章(見出し・太字・マーカー・箇条書き・数字と英字を含む)
• 本文の太さを400と500で切り替えるボタンつき

実際に横並びで比較することは大事ですね

ちなみに他の候補になったフォントがコチラ

SWELLにフォントを追加するコード

貼るファイルと位置ですが、子テーマ「SWELL CHILD」のfunctions.phpの末尾です
親テーマのSWELLに直接書くと、SWELLの更新で消えてしまうので、子テーマに書きます

コード全文(functions.phpの末尾に貼る)

基本的にfunctions.phpの末尾に下記コードを貼るだけ

フォントはお好きなものに変えてもらってそのままペタッと

/**
 * SWELL: カスタマイザー「ベースフォント」の選択肢にフォントを追加する
 * 子テーマ swell_child の functions.php の末尾に貼る(先頭の <?php は不要)
 *
 * 仕組み
 * - カスタマイザーの body_font_family コントロールに選択肢を足す
 * - 追加分を選んだときは、SWELL が :root に出す --swl-font_family を html:root で上書きする
 *   (body の font-family は var(--swl-font_family) なので、これでほぼ全体が切り替わる)
 * - Android では SWELL が body に sans-serif を直接出すので、body も変数に戻す
 */

// 追加したいフォント。キーは SWELL 標準の yugo / hirago / notosans / serif と被らない英小文字にする
// weight を書いたフォントは、本文の太さ(--swl-font_weight)もその値にする
function javeo_extra_fonts() {
	return [
		'zenmaru'   => [
			'label'  => 'Zen Maru Gothic(丸ゴシック)',
			'family' => '"Zen Maru Gothic", sans-serif',
			'url'    => 'https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap',
			'weight' => 500,
		],
		'mplusround' => [
			'label'  => 'M PLUS Rounded 1c(丸ゴシック)',
			'family' => '"M PLUS Rounded 1c", sans-serif',
			'url'    => 'https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap',
		],
		'zenkaku'   => [
			'label'  => 'Zen Kaku Gothic New',
			'family' => '"Zen Kaku Gothic New", sans-serif',
			'url'    => 'https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap',
		],
		'mplus2'    => [
			'label'  => 'M PLUS 2',
			'family' => '"M PLUS 2", sans-serif',
			'url'    => 'https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@400;700&display=swap',
		],
		'plexjp'    => [
			'label'  => 'IBM Plex Sans JP',
			'family' => '"IBM Plex Sans JP", sans-serif',
			'url'    => 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@400;700&display=swap',
		],
	];
}

// 1. カスタマイザーの選択肢に追加
add_action( 'customize_register', function ( $wp_customize ) {
	$extra = javeo_extra_fonts();

	foreach ( $wp_customize->controls() as $control ) {
		if ( false === strpos( $control->id, 'body_font_family' ) ) {
			continue;
		}
		foreach ( $extra as $key => $font ) {
			$control->choices[ $key ] = $font['label'];
		}

		$setting = $control->setting;
		if ( ! $setting ) {
			continue;
		}
		// SWELL のプレビュー用JSは追加分を知らないので、再読み込みで反映させる
		$setting->transport = 'refresh';

		// 元の sanitize が固定リストで弾く場合に備え、追加分だけ素通しにする
		$original = $setting->sanitize_callback;
		$hook     = "customize_sanitize_{$setting->id}";
		if ( $original ) {
			remove_filter( $hook, $original, 10 );
		}
		add_filter( $hook, function ( $value, $s ) use ( $original, $extra ) {
			if ( isset( $extra[ $value ] ) ) {
				return $value;
			}
			return $original ? call_user_func( $original, $value, $s ) : $value;
		}, 10, 2 );
	}
}, 999 );

// 現在選ばれているベースフォントのキー
function javeo_current_font_key() {
	if ( class_exists( 'SWELL_Theme' ) && method_exists( 'SWELL_Theme', 'get_setting' ) ) {
		return \SWELL_Theme::get_setting( 'body_font_family' );
	}
	$opt = get_option( 'loos_customizer' );
	return is_array( $opt ) ? ( $opt['body_font_family'] ?? '' ) : '';
}

// 2. 追加フォントを選んでいるときだけ、読み込みと変数の上書きをする(サイト表示・ブロックエディタ共通)
function javeo_enqueue_extra_font() {
	$extra = javeo_extra_fonts();
	$key   = javeo_current_font_key();
	if ( ! isset( $extra[ $key ] ) ) {
		return;
	}
	$font = $extra[ $key ];
	$vars = '--swl-font_family:' . $font['family'] . ';';
	if ( ! empty( $font['weight'] ) ) {
		$vars .= '--swl-font_weight:' . (int) $font['weight'] . ';';
	}
	wp_enqueue_style( 'javeo-extra-font', $font['url'], [], null );
	// Android では SWELL が body{font-family:sans-serif} を直接出すので、body も変数に戻す
	wp_add_inline_style( 'javeo-extra-font', 'html:root{' . $vars . '}html body{font-family:var(--swl-font_family);font-weight:var(--swl-font_weight)}' );
}
add_action( 'wp_enqueue_scripts', 'javeo_enqueue_extra_font', 20 );
add_action( 'enqueue_block_editor_assets', 'javeo_enqueue_extra_font', 20 );

コードでやっていること

やっていることは3つです

1. カスタマイザーの設定項目から、IDに body_font_family を含むものを探して、プルダウンの選択肢を足す
2. 足したフォントを選んでいるときだけ、そのGoogleフォントを読み込む
3. SWELLがフォントを渡している変数 --swl-font_family を、選んだフォントで上書きする(Zen Maru Gothicは太さの変数 --swl-font_weight も500に)

1つ目の設定項目のIDは、カスタマイザーの画面のHTMLで見ると loos_customizer[body_font_family] でした
コードでは名前をぴったり書かず、body_font_family を含む項目を探す形にしています
SWELLの更新で前後の名前が変わっても、そのまま動くようにするためです

1つ目では、ほかに2つ手を入れています
プレビューの更新方法を refresh(再読み込み)にしているのは、SWELLのプレビュー用の仕組みが追加したフォントを知らないためです
保存時の値のチェックも差し替えていて、元のチェックが追加分を弾かないよう、追加したフォントだけはそのまま通します

3つ目の上書きは html:root に書いています
SWELLが変数を出している :root より優先順位が高いので、読み込む順番に左右されません
もう1つ、html body にも同じ変数を指定し直しています
AndroidのときだけSWELLが本文に sans-serif を直接指定するため、変数だけ上書きしてもAndroidでは反映されませんでした
私もiPhoneとパソコンでは切り替わったのに、Androidだけ元のフォントのままで気づきました
同じ処理をブロックエディターにも掛けているので、記事の編集画面でも同じフォントで表示されます(私の環境では表示されました)

別のフォントを足したいとき

先頭の javeo_extra_fonts() の中に1組足すだけです

• キー:英小文字で、ほかのフォントと被らない名前(例 kiwimaru)
• label:プルダウンに出す名前
• family:CSSのフォント名(Googleフォントの名前を " で囲み、うしろに , sans-serif)
• url:Googleフォントの読み込みURL(使う太さだけを wght@400;700 のように並べる)
• weight:本文の太さを変えたいときだけ書く

使わないフォントは消してかまいません
ただし、いま選んでいるフォントの組を消すと、本文が端末の標準のゴシック体に変わるはずなので、先にカスタマイザーで別のフォントに切り替えておきます(理由は次の節の最後)

テーマファイルエディターでfunctions.phpに貼る手順

貼るのは、WordPressの管理画面にある「テーマファイルエディター」がおすすめです
FTPソフトでファイルをダウンロードして、編集して、アップロードし直す方法もありますが、ソフトの準備から始めると手間がかかりますしSFTPでやるには鍵ファイルの準備やらあるので
テーマファイルエディターなら、ブラウザだけで終わります

ここまで言っておきながらですが、私自身は日頃からFileZillaを使っているのでFTPでアップロードして反映しました
後述しますが、私と同じでWAFの設定でエディター更新ができなくなっているパターンもあるので環境に合わせて使い分けてください

上の画面は、FTPで上げたあとにテーマファイルエディターで中身を表示したところです

テーマファイルエディターがメニューに無いとき

「外観」の中にテーマファイルエディターが見当たらないなら、wp-config.phpで止められているかもしれません
DISALLOW_FILE_EDIT か DISALLOW_FILE_MODS が true になっていると、エディター自体が無効になり、メニューにも出なくなります(WordPressの公式ドキュメント)

テーマの編集には管理者の権限も必要です
編集者のアカウントでログインしている場合も、メニューには出てきません

私のサイトで確かめたこと

2026年11月3日、Zen Maru Gothicを選んで公開したあとに確かめた結果です

• トップページ・記事ページとも普通に表示され、HTMLにPHPの警告は出ていなかった
• ブラウザの開発者ツールで見ると、本文のフォントは "Zen Maru Gothic", sans-serif、太さは500
• 元のNoto Sans JPの読み込みは消えていて、フォントを二重に読み込んでいなかった
• ブロックエディターの編集画面でも、Zen Maru Gothicで表示された

コードを消す前に標準のフォントへ戻す

追加したフォントを選んでいるとき、SWELL本体は変数に sans-serif だけを出しています
コードがそれを上書きしているから、Zen Maru Gothicで表示されている状態です

なので、追加したフォントを選んだままコードを消すと、本文は端末の標準のゴシック体(sans-serif)に変わるはずです
見る人の端末によって、見た目が変わることになります
コードを外すときは、先にカスタマイザーで標準の4つのどれかに戻して公開してからにします

テーマファイルエディターで保存できないときはファイルを直接書き換える

「ファイルを更新」を押してもエラーになって保存できない場合、コードではなくサーバー側の制限が原因のことがあります
そのときは、サーバーにあるfunctions.phpを直接書き換えるのが確実です
エックスサーバーならブラウザで使える「ファイルマネージャ」があるので、FTPソフトを用意しなくても済みます

サーバーのWAFがエディターの保存を止めることがある

サーバー側で保存が止まる経路は、2つ考えられます

1. 保存の送信そのものが弾かれる(「保存中にエラーが発生しました」や403などのエラーになる)
2. 保存のあとの確認のアクセスが通らず、先ほどの安全装置が変更を取り消す

1つ目は実際に起きている例があります
2つ目は、安全装置が「確認そのものができなかったとき」も戻す仕組みのためです
どちらも、コードが正しくても起きます
出てくるメッセージは環境によって違うので、文言だけで原因を決めつけないほうがよさそうです

保存できないからといって、コードが間違っているとは限りません

その「弾く側」になり得るのが、レンタルサーバーのWAF(不正なアクセスを見つけて止める仕組み)です
エックスサーバーなら、サーバーパネルの「セキュリティ」→「WAF設定」にあります
設定画面でドメインを選ぶと、6つの項目をそれぞれON/OFFできます

• XSS対策（javascriptなどのスクリプトタグが埋め込まれたアクセスについて検知します。）
• SQL対策（SQL構文に該当する文字列が挿入されたアクセスについて検知します。）
• ファイル対策（.htpasswd、.htaccess、httpd.conf等、サーバーに関連する設定ファイルが含まれたアクセスを検知します。）
• メール対策（to、cc、bcc等のメールヘッダーに関係する文字列を含んだアクセスを検知します。）
• コマンド対策（kill、ftp、mail、ping、ls等コマンドに関連する文字列が含まれたアクセスを検知します。）
• PHP対策（session、ファイル操作に関連する関数のほか脆弱性元になる可能性の高い関数の含まれたアクセスを検知します。）

私のサーバーは6つともONにしていて、どの項目がエディターの保存をブロックしているかまで確認していませんが

私も以前、Cocoonの設定を保存しようとして、このWAFに保存の送信を403で止められたことがあります(→「Cocoon設定」で403エラーになったときの話)
1つ目の経路と同じ形です

WAFを一時的にOFFにするなら、作業後にONへ戻す

エディターで保存したいなら、WAFを一時的にOFFにする方法もあります
ただし、エックスサーバーのWAF設定のマニュアルによると、設定を変えてから反映されるまで、新しいサーバーパネルで最大30分程度かかる場合があります

1. WAF設定でOFFにして、反映を待つ
2. テーマファイルエディターで保存する
3. WAFをONに戻す(こちらも反映まで最大30分程度)

OFFのまま運用するのは避けて、作業が終わったら元に戻してください
OFFにするのも、作業するドメインだけにしておくと安心です

エックスサーバーならファイルマネージャで編集する

WAFをOFFにする方法では、OFFが反映されるまで待ってからでないと保存できません
エックスサーバーを使っているなら、サーバーパネルの「ファイルマネージャ」でfunctions.phpを直接編集するのが手軽です
ブラウザだけで終わるので、FTPソフトのインストールや接続の設定はいりません

私のサーバーはWAFの6項目をすべてONにしたままですが、ファイルマネージャからはfunctions.phpを保存できました
WAFをOFFにして反映を待つ必要もありません

ファイルマネージャは、サーバーパネル右上の「ファイルマネージャ」ボタンか、「FTP」→「FTPアカウント設定」の一覧にある「管理」ボタンから開けます

1. ファイルマネージャで <ドメイン>/public_html/wp-content/themes/swell_child/ を開く
2. functions.phpを右クリックして「ダウンロード」を選び、バックアップとしてパソコンに保存しておく
3. もう一度functions.phpを右クリックして「編集」を選ぶ
4. 末尾にコードを貼って保存する

ファイルマネージャが無いサーバーはFTPで上書きする

ほかのレンタルサーバーでも、管理画面にファイルマネージャのような機能があればそちらが手軽です
無ければ、FTPソフトで上書きします
私が実際に反映したのは、こちらの方法です

1. FTPソフトでサーバーにつなぎ、<ドメイン>/public_html/wp-content/themes/swell_child/functions.php をパソコンにダウンロードする(エックスサーバーの場合)
2. ダウンロードしたファイルを別名でコピーして、バックアップにする
3. functions.phpの末尾にコードを貼り、文字コードは「UTF-8(BOMなし)」で保存する
4. 同じ場所にアップロードして上書きする

ファイルマネージャやFTPで書き換えたファイルには、テーマファイルエディターの安全装置が働きません
書き間違いがあると、サイトがそのまま表示できなくなることもあります
そうなったら、取っておいたバックアップのfunctions.phpをアップロードして上書きすれば元に戻ります

ジャベ雄

FTPソフトを入れていないなら、まずはファイルマネージャを探してみるのがおすすめです

まとめ

SWELLのベースフォントは4択ですが、子テーマのfunctions.phpにコードを足せば、カスタマイザーのプルダウンにGoogleフォントを追加できます
一度貼れば、あとは選んで公開するだけで切り替えられます

• フォントは、本文と同じ条件の見本で見比べて選ぶ(私はくだけすぎない丸ゴシックのZen Maru Gothicを本文500で)
• 貼るのはテーマファイルエディターが手軽、作業前にfunctions.phpの中身をバックアップ
• 保存できないときはサーバーのWAFを疑い、ファイルマネージャ(無ければFTP)で直接書き換える
• コードを消す前に、カスタマイザーで標準のフォントへ戻す

フォントが替わると、同じ記事でも読んだときの印象がかなり変わります
気になっているフォントがあれば、まずは比較の見本を作るところから試してみてください