タグアーカイブ Kadence Blocks

Kadence Blocksでエディタのフォントがセリフ体になる原因と直し方

Kadence Blocks の Advanced Typography で Google Fonts を選択したにもかかわらず、ブロックエディタ上でセリフ体のフォールバックフォントが表示される問題は、Kadence Blocks 3.7.3 以降のエディタ内フォント読み込み処理の変更に起因する。フロントエンドで正しく表示されているのであれば、エディタ側の設定やバージョン調整で解決できる。

なぜエディタ内だけ Google Fonts が正しく表示されないのか

Kadence Blocks の Advanced Typography は、サイトのフロントエンドとブロックエディタの両方に選択したフォントを読み込む仕組みになっている。しかしバージョン 3.7.3 以降、エディタ画面でのフォント読み込みパスや enqueue のタイミングに変更が入り、特定の環境下で Google Fonts のスタイルシートが正しく適用されなくなった。

実際の症状として、例えば Roboto を指定したのにエディタ上では明朝体や Times New Roman 系のセリフ体で表示される。これはブラウザが指定されたフォントを見つけられず、システムのデフォルトフォントにフォールバックしている状態だ。フロントエンドでは Kadence Theme 側のフォント読み込み処理が正常に機能するため問題が表面化しない。

この問題はプラグインの競合ではなく、Kadence Blocks 単体のエディタ向けフォント読み込み処理に起因する。そのため全プラグインを無効化しても再現し、標準テーマに切り替えても改善しない場合がある。

Kadence のフォント設定を確認して対処する

「外観」→「カスタマイズ」でフォントキャッシュを削除する

Kadence Theme には、Google Fonts のローカルキャッシュを管理する機能が組み込まれている。このキャッシュが破損していたり古い情報を保持していると、エディタで正しいフォントが読み込まれないことがある。

1. WordPress 管理画面の「外観」→「カスタマイズ」を開く
2. 「General」→「Performance」へ進む
3. 「Google Fonts」セクションにある「Clear Font Cache」ボタンをクリックする
4. カスタマイザーを保存して閉じ、ブロックエディタをリロードする

この操作で Kadence が保持していたフォント情報がクリアされ、次回エディタを開いた際に最新のフォントファイルが再取得される。キャッシュクリア後も改善しない場合は、次の手順に進む。

「Google Fonts の読み込み方法」を切り替える

Kadence は Google Fonts の読み込み方式を複数用意している。設定によってエディタ側のフォント描画に影響が出るため、別の方式に変更して検証する。

• 「外観」→「カスタマイズ」→「General」→「Performance」→「Google Fonts」を開く
• 「Load Method」を現在とは別のオプションに切り替える（例: 「Local」から「CDN」へ、またはその逆）
• 保存後にブロックエディタを再読み込みしフォント表示を確認する

ローカル読み込み（Local）に設定すると、Google のサーバーからフォントをダウンロードして自サイト内に保存する。CDN 読み込みでは Google の配信網から直接フォントを取得する。サーバー環境やセキュリティ設定によっては、ローカル読み込み時のファイル生成に失敗してエディタ側のフォントが欠落することがある。

Advanced Typography のエディタ向け設定を確認する

Kadence Blocks のブロック設定パネルにある Advanced Typography には、エディタ内プレビュー用のフォント読み込みを制御する内部フラグが存在する。設定画面から直接変更できる項目ではないが、次の操作でリセットできる。

1. 問題が発生しているブロックを選択し、右サイドバーの「Advanced」→「Typography」を開く
2. フォント選択を一度「Default / Inherit」に戻し、保存する
3. ページをリロードしたあと、再度目的の Google Fonts を選択し直す

これにより Kadence Blocks がエディタ向けにフォントを再登録し、正しいスタイルシートが読み込まれるようになる場合がある。

上記のデモはエディタ画面内でのフォント描画の違いを表したものだ。修正後はフロントエンドと同じフォントがエディタでも適用される。

Kadence Blocks のバージョンを変更して問題を回避する

バージョン 3.7.2 にダウングレードする手順

この問題は Kadence Blocks 3.7.3 以降で発生し、3.7.2 では起こらないことが確認されている。どうしてもエディタ内のフォント表示を正しく保ちたい場合、一時的に 3.7.2 へ戻すのが確実な回避策になる。ただしダウングレードはセキュリティ面で推奨されないため、次のアップデートで修正されるまでの応急処置と割り切る。

1. 管理画面の「プラグイン」→「プラグインの追加」→「プラグインのアップロード」ボタンをクリックする
2. Kadence Blocks の旧バージョン（3.7.2）の ZIP ファイルをアップロードする
3. 「現在のプラグインをアップロードしたものに置き換えますか？」という確認で「はい」を選択する
4. プラグインが上書きされたら、必ず「自動更新を無効化」して意図しないアップデートを防ぐ

旧バージョンの ZIP ファイルは、WordPress.org のプラグインページにある「Advanced View」→「Previous Versions」からダウンロードできる。上書きインストール後はブロックエディタを再読み込みし、フォント表示が正常に戻ったか確認する。

アップデートで修正されたかを定期的に確認する

Kadence Blocks は更新頻度が高いプラグインのため、数週間以内にこの問題が修正された新バージョンがリリースされる可能性がある。ダウングレードした状態でも、WordPress 管理画面の「プラグイン」ページや Kadence の公式チェンジログを定期的にチェックし、修正版が公開されたら速やかに最新版へ更新する。

手動でエディタ用スタイルを補完する方法

子テーマの editor-style.css でフォントを明示する

Kadence のエディタ内フォント読み込みが不安定な場合、子テーマにエディタ専用のスタイルシートを用意し、使用する Google Fonts を直接指定する方法が有効だ。これは Kadence の処理に依存せず、WordPress 標準の仕組みでエディタにフォントを読み込ませる。

/* 子テーマの functions.php に追加 */
function my_editor_styles() {
    add_theme_support( 'editor-styles' );
    add_editor_style( 'editor-style.css' );
}
add_action( 'after_setup_theme', 'my_editor_styles' );

/* 子テーマ直下の editor-style.css */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

.editor-styles-wrapper {
    font-family: 'Roboto', sans-serif;
}

このコードにより、ブロックエディタの読み込み時に指定した Google Fonts が強制的に適用される。Kadence 側のフォント読み込み処理が失敗しても、エディタ上では正しいフォントが表示されるようになる。ただし、この方法はサイト全体に適用されるため、ページやブロックごとに異なるフォントを使い分けている場合は注意が必要だ。

Kadence のフィルターフックでエディタ用フォントを追加する

よりピンポイントに Kadence Blocks のエディタ向けフォント読み込みを補強したい場合、Kadence が提供するフィルターフックを利用する。次のコードを子テーマの functions.php に追加することで、エディタ用のフォントスタイルをプログラム的に挿入できる。

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style(
        'custom-editor-fonts',
        'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap',
        [],
        null
    );
}, 99 );

このフックはブロックエディタが読み込まれるタイミングで実行され、優先度 99 で登録することで Kadence の内部処理より後にスタイルを追加する。結果として、Kadence が読み込みに失敗した場合でも確実にエディタ上で Google Fonts が利用可能になる。

よくある質問

フロントエンドでは正しく表示されるのにエディタだけおかしいのはなぜか

Kadence Blocks はフロントエンドとエディタで別々のフォント読み込み処理を行っている。フロントエンドは Kadence Theme の仕組みが、エディタは Kadence Blocks の仕組みが担当しており、後者の処理に不具合があるとエディタ内だけでフォントが崩れる。表示確認の際は必ず両方の環境を見比べることが大切だ。

キャッシュを削除しても直らない場合はどうすればよいか

Kadence のフォントキャッシュクリアで改善しない場合、ブラウザキャッシュやサーバー側のキャッシュ（CDN やキャッシュプラグイン）もすべて削除する。その後も直らなければ、Kadence Blocks のバージョンを 3.7.2 にダウングレードするか、前述の editor-style.css による手動補完を検討する。

特定の Google Fonts だけがエディタで表示されないのはなぜか

フォントのウェイト数が多いものや可変フォント（Variable Fonts）は、Kadence のエディタ向け読み込み処理が対応しきれずに欠落することがある。この場合、問題のフォントを Kadence の「Custom Fonts」機能で手動アップロードするか、前述のフィルターフックで直接 Google Fonts の URL を指定すると安定する。

Kadence Blocks のバージョンを下げると他の機能に影響はあるか

3.7.2 へのダウングレードでは、3.7.3 以降に追加された新機能やバグ修正が失われる。具体的にはブロックの追加オプションやパフォーマンス改善が適用されない。ただし、基本的なブロック編集機能やフロントエンド表示には大きな影響は出ない。ダウングレードはあくまで応急処置として考え、修正版のリリースを待つ姿勢が安全だ。

別のテーマに切り替えたらエディタでフォントが表示されるようになった

Kadence Theme を無効化して別のテーマにすると、エディタ内のフォント管理がそのテーマ側に移るため問題が解消されることがある。これは根本的な解決ではなく、Kadence Blocks と Kadence Theme の組み合わせ特有の不具合であることを示している。テーマを変更できない場合は、やはり前述のコードによる手動補完が現実的な対処になる。

この記事のポイント

• Kadence Blocks 3.7.3 以降のエディタ向けフォント読み込み処理に不具合があり、セリフ体にフォールバックする
• 「外観」→「カスタマイズ」のフォントキャッシュクリアと読み込み方式の切り替えで改善する可能性がある
• 一時的な回避策として Kadence Blocks を 3.7.2 にダウングレードする方法がある
• 子テーマの editor-style.css やフィルターフックでエディタ用フォントを手動補完すると確実に表示できる
• 修正版がリリースされたら速やかに最新バージョンへ更新することが重要

佐々木 太陽

・ Reddit、Stack Overflow、WordPress.org フォーラムを日々巡回し、現場の悩みを拾い上げて記事化
・ WordPress、WooCommerce、Next.js などモダンWeb制作領域のトラブルシューティングが専門
・ 「検索しても答えが見つからなかった」を一つでも減らすことが目標
・ エラーメッセージから根本原因にたどり着く粘り強い調査が得意
・ 初心者がつまずきやすい箇所を先回りで解決する記事作りを心がけている