[ 解決済 ] SmaVeksiveサンプル工務店のテーマにおいてスタイルバリエーション.jsonファイルでのフォントの指定について

このトピックには13件の返信、3人の参加者があり、最後にY.INABAにより1時間、 32分前に更新されました。

14件の投稿を表示中 - 1 - 14件目 (全14件中)

投稿者

投稿
2026年10月14日 7:58 AM #130757

webfactoryjp
参加者

■ WordPress のバージョン
バージョン 7.1.3

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
その他

■ プラグインの種類・バージョン
VK FullSite Installer　プラグインインストールの初期状態

■ 期待する動作
スタイルバリエーション（自作の styles/halloween.json）を切り替えた際に、「見出し (VK)」ブロックのH2およびその直上にある英語サブテキストのフォントを、連動して別フォント（Google FontsのHenny Penny）に切り替えたいと考えています。全体の色を自作の styles/halloween.jsonスタイルボタンで変更することはできています。

■ 自分で試した事
子テーマの theme.json の settings.typography.fontFamilies に、ローカルアセットとしてフォントファイル（HennyPenny-Regular.ttf）を登録しました。

“blocks”: {
“vk-blocks/heading”: {
“color”: {
“text”: “var(–wp–preset–color–primary)”
},
“css”: “.wp-block-vk-blocks-heading h2, .wp-block-vk-blocks-heading .vk_heading_subtext, .vk_heading_subtext, .vk_heading_title { font-family: var(–wp–preset–font-family–henny-penny) !important; }”
}
}

■ 症状が発生するブラウザ
chrome

■ 実際の症状
styles/halloween.json の styles.blocks[“vk-blocks/heading”] 内で、登録したフォント変数（var(–wp–preset–font-family–henny-penny)）を指定していますが、フォントが切り替わりません。

■ その他特記事項
スタイル切り替えと同時に「見出し（VK）ブロック」のサブテキストフォントをきれいに連動させるには、theme.json（または halloween.json）の styles 内に具体的にどのような階層・プロパティで記述するのが正しい仕様でしょうか？

工務店における見出しブロック指定名です

添付画像の[CHECK見学会でわかること]のCHECKの部分です

2026年10月14日 9:05 AM #130758

Y.INABA
参加者

お手数ですが、以下ご確認いただけますでしょうか。

1. 記載いただいたtheme.jsonの書式は正しいでしょうか。
　コンマなどは抜けていませんか？　余計な括弧やコンマなどは入っていたりはしませんか？
　恐れ入りますが、子テーマ内のtheme.jsonをご教示いただいてもよろしいでしょうか？

2. 書式が正しい場合でも、一度どこかの画面でスタイルを設定済の場合、theme.jsonよりも保存済の設定が優先されるため「スタイルをリセット」を押下するまでは切り替わりません。
　「スタイルをリセット」操作はお試しでいらっしゃいますでしょうか？
※一度「スタイルをリセット」をする前に、事前にバックアップの取得をお願いします。
※こちらはWordPress本体側の仕様になります。テーマ側で制御できる部分ではないので、ご容赦くださいませ。

▼ご参考
https://ja.wordpress.org/support/topic/theme-json%e3%81%ae%e4%b8%80%e9%83%a8%e3%81%8c%e5%8f%8d%e6%98%a0%e3%81%95%e3%82%8c%e3%81%aa%e3%81%84/

2026年10月14日 9:27 AM #130759

webfactoryjp
参加者

お世話になっております。
回答ありがとうございます。

{
“$schema”: “https://wp.org”,
“version”: 3,
“settings”: {
“color”: {
“palette”: [
{ “name”: “Primary”, “slug”: “primary”, “color”: “#0ABAB5” },
{ “name”: “Secondary”, “slug”: “secondary”, “color”: “#4DC9C2” },
{ “name”: “Tertiary”, “slug”: “tertiary”, “color”: “#81D8D2” },
{ “name”: “Quaternary”, “slug”: “quaternary”, “color”: “#C6EFEB” },
{ “name”: “Primary Hover”, “slug”: “primary-hover”, “color”: “#099E9E” },
{ “name”: “Background Primary”, “slug”: “bg-primary”, “color”: “#F1FFFB” },
{ “name”: “Background Secondary”, “slug”: “bg-secondary”, “color”: “#f6ebe0” },
{ “name”: “Background Tertiary”, “slug”: “bg-tertiary”, “color”: “#fff” },
{ “name”: “Text Normal”, “slug”: “text-normal”, “color”: “#333” },
{ “name”: “Text Secondary”, “slug”: “text-secondary”, “color”: “rgba(0,0,0,0.5)” },
{ “name”: “Border Normal”, “slug”: “border-normal”, “color”: “rgba(0,0,0,0.1)” },
{ “name”: “Background Dark”, “slug”: “bg-dark”, “color”: “#222” },
{ “name”: “Background Dark Transparent”, “slug”: “bg-dark-transparent”, “color”: “rgba(0,0,0,0.05)” },
{ “name”: “Text Normal Dark Background”, “slug”: “text-normal-darkbg”, “color”: “rgba(255,255,255,0.7)” },
{ “name”: “Text Secondary Dark Background”, “slug”: “text-secondary-darkbg”, “color”: “rgba(255,255,255,0.6)” },
{ “name”: “Border Normal Dark Background”, “slug”: “border-normal-darkbg”, “color”: “rgba(255,255,255,0.1)” },
{ “name”: “Tiffany 001”, “slug”: “tiffany-color-001”, “color”: “#5DC1CF” },
{ “name”: “Tiffany 002”, “slug”: “tiffany-color-002”, “color”: “#7EC9C1” },
{ “name”: “Tiffany 003”, “slug”: “tiffany-color-003”, “color”: “#81CAC4” },
{ “name”: “Attend”, “slug”: “attend-color”, “color”: “#5C6BC0” },
{ “name”: “Soku”, “slug”: “soku-color”, “color”: “#0D3B66” },
{ “name”: “Room”, “slug”: “room-color”, “color”: “#26A69A” },
{ “name”: “Media”, “slug”: “media-color”, “color”: “#3163C8” }
]
},
“typography”: {
“fontFamilies”: [
{
“name”: “System Font”,
“slug”: “system-font”,
“fontFamily”: “-apple-system, BlinkMacSystemFont, \”Segoe UI\”, sans-serif”
},
{
“name”: “Nothing You Could Do”,
“slug”: “nothing-you-could-do”,
“fontFamily”: “\”Nothing You Could Do\”, cursive”,
“fontFace”: [
{
“fontFamily”: “Nothing You Could Do”,
“fontStyle”: “normal”,
“fontWeight”: “400”,
“src”: [ “file:./assets/fonts/nothing-you-could-do/nothing-you-could-do-400-normal.woff2” ]
}
]
},
{
“name”: “Noto Sans JP”,
“slug”: “noto-sans-jp”,
“fontFamily”: “\”Noto Sans JP\”, sans-serif”,
“fontFace”: [
{ “fontFamily”: “Noto Sans JP”, “fontStyle”: “normal”, “fontWeight”: “400”, “src”: [ “file:./assets/fonts/noto-sans-jp/noto-sans-jp-400-normal.woff2” ] },
{ “fontFamily”: “Noto Sans JP”, “fontStyle”: “normal”, “fontWeight”: “100”, “src”: [ “file:./assets/fonts/noto-sans-jp/noto-sans-jp-100-normal.woff2” ] },
{ “fontFamily”: “Noto Sans JP”, “fontStyle”: “normal”, “fontWeight”: “600”, “src”: [ “file:./assets/fonts/noto-sans-jp/noto-sans-jp-600-normal.woff2” ] },
{ “fontFamily”: “Noto Sans JP”, “fontStyle”: “normal”, “fontWeight”: “900”, “src”: [ “file:./assets/fonts/noto-sans-jp/noto-sans-jp-900-normal.woff2” ] }
]
},
{
“name”: “Anton”,
“slug”: “anton”,
“fontFamily”: “Anton, sans-serif”,
“fontFace”: [
{ “fontFamily”: “Anton”, “fontStyle”: “normal”, “fontWeight”: “400”, “src”: [ “file:./assets/fonts/anton/anton-400-normal.woff2” ] }
]
},
{
“name”: “Zen Old Mincho”,
“slug”: “zen-old-mincho”,
“fontFamily”: “\”Zen Old Mincho\”, serif”,
“fontFace”: [
{ “fontFamily”: “Zen Old Mincho”, “fontStyle”: “normal”, “fontWeight”: “400”, “src”: [ “file:./assets/fonts/zen-old-mincho/zen-old-mincho-400-normal.woff2” ] }
]
},
{
“name”: “Shippori Mincho”,
“slug”: “shippori-mincho”,
“fontFamily”: “\”Shippori Mincho\”, serif”,
“fontFace”: [
{ “fontFamily”: “Shippori Mincho”, “fontStyle”: “normal”, “fontWeight”: “400”, “src”: [ “file:./assets/fonts/shippori-mincho/shippori-mincho-400-normal.woff2” ] }
]
},
{
“name”: “LINE Seed JP”,
“slug”: “line-seed-jp”,
“fontFamily”: “\”LINE Seed JP\”, sans-serif”,
“fontFace”: [
{ “fontFamily”: “LINE Seed JP”, “fontStyle”: “normal”, “fontWeight”: “700”, “src”: [ “file:./assets/fonts/line-seed-jp/line-seed-jp-700-normal.woff2” ] }
]
},
{
“name”: “Playfair Display”,
“slug”: “playfair-display”,
“fontFamily”: “\”Playfair Display\”, serif”,
“fontFace”: [
{ “fontFamily”: “Playfair Display”, “fontStyle”: “normal”, “fontWeight”: “400”, “src”: [ “file:./assets/fonts/playfair-display/playfair-display-400-normal.woff2” ] }
]
},
{
“name”: “Source Serif Pro”,
“slug”: “source-serif-pro”,
“fontFamily”: “\”Source Serif Pro\”, serif”,
“fontFace”: [
{ “fontFamily”: “Source Serif Pro”, “fontStyle”: “normal”, “fontWeight”: “100 900”, “src”: [ “file:./assets/fonts/source-serif-pro/source-serif-pro-variable.woff2” ] },
{ “fontFamily”: “Source Serif Pro”, “fontStyle”: “italic”, “fontWeight”: “100 900”, “src”: [ “file:./assets/fonts/source-serif-pro/source-serif-pro-italic-variable.woff2” ] }
]
},
{
“name”: “Henny Penny”,
“slug”: “henny-penny”,
“fontFamily”: “\”Henny Penny\”, system-ui”,
“fontFace”: [
{
“fontFamily”: “Henny Penny”,
“fontWeight”: “400”,
“fontStyle”: “normal”,
“src”: [
“file:./assets/fonts/henny-penny/HennyPenny-Regular.ttf”
]
}
]
}
]
}
}
}

上記はtheme.json

{
“$schema”: “https://schemas.wp.org/wp/7.1/theme.json”,
“version”: 3,
“title”: “ハロウィン”,
“settings”: {
“color”: {
“palette”: [
{
“name”: “Primary”,
“slug”: “primary”,
“color”: “#F28C28”
},
{
“name”: “Secondary”,
“slug”: “secondary”,
“color”: “#7541A8”
},
{
“name”: “Tertiary”,
“slug”: “tertiary”,
“color”: “#292033”
},
{
“name”: “Quaternary”,
“slug”: “quaternary”,
“color”: “#FFF4E5”
},
{
“name”: “Primary Hover”,
“slug”: “primary-hover”,
“color”: “#D96B0B”
},
{
“name”: “Background Primary”,
“slug”: “bg-primary”,
“color”: “#FFF4E5”
},
{
“name”: “Background Secondary”,
“slug”: “bg-secondary”,
“color”: “#EEE4F5”
},
{
“name”: “Background Tertiary”,
“slug”: “bg-tertiary”,
“color”: “#FFFFFF”
},
{
“name”: “Text Normal”,
“slug”: “text-normal”,
“color”: “#292033”
},
{
“name”: “Text Secondary”,
“slug”: “text-secondary”,
“color”: “rgba(0,0,0,0.5)”
},
{
“name”: “Border Normal”,
“slug”: “border-normal”,
“color”: “rgba(0,0,0,0.1)”
},
{
“name”: “Background Dark”,
“slug”: “bg-dark”,
“color”: “#292033”
},
{
“name”: “Background Dark Transparent”,
“slug”: “bg-dark-transparent”,
“color”: “rgba(0,0,0,0.05)”
},
{
“name”: “Text Normal Dark Background”,
“slug”: “text-normal-darkbg”,
“color”: “rgba(255,255,255,0.7)”
},
{
“name”: “Text Secondary Dark Background”,
“slug”: “text-secondary-darkbg”,
“color”: “rgba(255,255,255,0.6)”
},
{
“name”: “Border Normal Dark Background”,
“slug”: “border-normal-darkbg”,
“color”: “rgba(255,255,255,0.1)”
},
{
“name”: “Tiffany 001”,
“slug”: “tiffany-color-001”,
“color”: “#5DC1CF”
},
{
“name”: “Tiffany 002”,
“slug”: “tiffany-color-002”,
“color”: “#7EC9C1”
},
{
“name”: “Tiffany 003”,
“slug”: “tiffany-color-003”,
“color”: “#81CAC4”
},
{
“name”: “Attend”,
“slug”: “attend-color”,
“color”: “#5C6BC0”
},
{
“name”: “Soku”,
“slug”: “soku-color”,
“color”: “#0D3B66”
},
{
“name”: “Room”,
“slug”: “room-color”,
“color”: “#26A69A”
},
{
“name”: “Media”,
“slug”: “media-color”,
“color”: “#3163C8”
},
{
“name”: “Purple”,
“slug”: “purple”,
“color”: “#7541A8”
},
{
“name”: “Cream”,
“slug”: “cream”,
“color”: “#FFF4E5”
},
{
“name”: “Gold”,
“slug”: “gold”,
“color”: “#A8C940”
}
]
}
},
“styles”: {
“color”: {
“background”: “var(–wp–preset–color–bg-primary)”,
“text”: “var(–wp–preset–color–text-normal)”
},
“elements”: {
“link”: {
“color”: {
“text”: “var(–wp–preset–color–primary-hover)”
}
},
“button”: {
“color”: {
“text”: “#FFFFFF”,
“background”: “var(–wp–preset–color–primary)”
},
“border”: {
“radius”: “8px”
}
}
},
“blocks”: {
“vk-blocks/heading”: {
“color”: {
“text”: “var(–wp–preset–color–primary)”
},
“css”: “.wp-block-vk-blocks-heading h2, .wp-block-vk-blocks-heading .vk_heading_subtext, .vk_heading_subtext, .vk_heading_title { font-family: var(–wp–preset–font-family–henny-penny) !important; }”
}
}
}
}

上記がhalloween.jsonです

色は変わりますが、フォントが切り替わらずです。

スタイルリセット、キャッシュのクリアは行っております。

2026年10月14日 9:50 AM #130760
Y.INABA
参加者
ご教示いただきありがとうございます。

ざっと見るだけでも目立つ誤りが4点ほどありますので、修正いただけますでしょうか？

1. 引用符の記号が全体的に間違っています（コードで囲わないと自動変換されるのかもしれませんが）。半角のダブルクオーテーションに全て変更してください。
▼例：“blocks” → "blocks"、“vk-blocks/heading” → "vk-blocks/heading" に修正をお願いします。
```
“blocks”: {
“vk-blocks/heading”: {
“color”: {
“text”: “var(–wp–preset–color–primary)”
},
“css”: “.wp-block-vk-blocks-heading h2, .wp-block-vk-blocks-heading .vk_heading_subtext, .vk_heading_subtext, .vk_heading_title { font-family: var(–wp–preset–font-family–henny-penny) !important; }”
}
}
```
フォントファミリーの箇所は以下のように書き換えると良いかもです。
"fontFamily": "'Noto Sans JP', sans-serif"

2. theme.json側のschemeのURLも現在の書式にあったものではありませんので、以下修正してください。
"$schema": "https://wp.org"

3. var(–wp–preset–color–bg-primary) ではなく var(--wp--preset--color--bg-primary) です。（ハイフンは最後以外は2つです）
　ハイフンの数が誤っている箇所が多いですので、修正をお願いします。

4. H2のCSSの箇所などは以下のとおり修正すると良いかと思います。
```
"vk-blocks/heading": {
  "color": {
    "text": "var(--wp--preset--color--primary)"
  },
  "css": "& h2.vk_heading_title { font-family: var(--wp--preset--font-family--henny-penny) !important; }"
}
```
2026年10月14日 10:13 AM #130761

対馬俊彦
参加者
制作実績

該当箇所は VK Blocks の見出しではなく、
WordPress コアの段落と見出しです。

段落には追加 CSS クラス has-nothing-you-could-do-font-family が
指定されていますので、これを削除するか、
またはこれを打ち消す CSS を書く必要があります。

他にも POINT 01 の部分などもこのようになっています。

Attachments:
You must be logged in to view attached files.

2026年10月14日 10:21 AM #130763
Y.INABA
参加者
対馬様

該当箇所は VK Blocks の見出しではなく、
WordPress コアの段落と見出しです。

フォローありがとうございます！
ならば、該当箇所の theme.json も以下のとおり修正した方が良いですかね。
```
"core/paragraph": {
  "css": "&.has-henny-penny-font-family { color: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--henny-penny) !important; }"
}
```
そして、クラス名を has-nothing-you-could-do-font-family から has-henny-penny-font-familyに変更いただくとして。
2026年10月14日 12:05 PM #130765
webfactoryjp
参加者
1.に関しましてはわたしがcodeで囲まなかったせいでした。「"」で囲ってあります

2."$schema"は、"$schema": "https://schemas.wp.org/trunk/theme.json",に変更しました

3.var(--wp--preset--color--bg-primary)ハイフンは最後以外は2つこちらも見直し修正しました

4.H2のCSSのところは、対馬様のご指摘も含め
```
"blocks": {
      "core/paragraph": {
  "color": {
    "text": "var(--wp--preset--color--primary)"
  },
  "css": "&.has-henny-penny-font-family { color: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--henny-penny) !important; }"
}
    }
```
にしました

5.has-nothing-you-could-do-font-familyは削除してhas-henny-penny-font-familyを高度な設定の追加CSSクラスで置き替えました

結果ですが、
無事にhennypennyがH2の見出しの後ろに表示されるようになりました(^^)/

ですが…デフォルトスタイルもH2の見出しの後ろがhennypennyに…

halloween.jsonのスタイルを選択したときだけにhennypennyに置き換わり
デフォルトに戻した時はデフォルトで設定しているフォントPlayfair Displayに戻したいのですが

今回ご教授頂いたjsonコードにすると、デフォルトもハロウィンもどちらもhennypennyです

どこがいけないのでしょうか
2026年10月14日 12:28 PM #130766
Y.INABA
参加者
ご確認ありがとうございます。

halloween.jsonのスタイルを選択したときだけにhennypennyに置き換わり
デフォルトに戻した時はデフォルトで設定しているフォントPlayfair Displayに戻したいのですが

これまではHenny Pennyに変更することだけを念頭にtheme.jsonを修正していましたので、上記前提とは関係なくフォントが変更されることを考慮していませんでした。

お手数ですがクラス名 has-background-text-font-family （一例）などに変更いただき、 theme.jsonについて以下に再度変更いただいてもよろしいでしょうか。
```
"core/paragraph": {
  "color": {
    "text": "var(--wp--preset--color--primary)"
  },
  "css": "&.has-background-text-font-family { font-family: var(--wp--preset--font-family--playfair-display); }"
}
```
加えて、halloween.json 側に以下の設定の追記をお願いします（blocks等の親設定は省略していますが、こちらも漏れなく追記をお願いします）。
```
"core/paragraph": {
  "color": {
    "text": "var(--wp--preset--color--primary)"
  },
  "css": "&.has-background-text-font-family { font-family: var(--wp--preset--font-family--henny-penny) !important; }"
}
```
2026年10月14日 1:04 PM #130767

webfactoryjp
参加者

早速のご指導ありがとうございます
作業前の質問です

お手数ですがクラス名 has-background-text-font-family （一例）などに変更いただき、 theme.jsonについて以下に再度変更いただいてもよろしいでしょうか。

こちらはtheme.jsonの"styles"の中に"color""elements"と同階層に"blocks"をつくりその中に入れるでいいでしょうか？

加えて、halloween.json 側に以下の設定の追記をお願いします（blocks等の親設定は省略していますが、こちらも漏れなく追記をお願いします）。

こちらは入れ替えではなく「追記」でよろしいでしょうか？

お忙しいところ恐れ入りますが、再度ご教授頂けると助かります

2026年10月14日 1:25 PM #130769
Y.INABA
参加者
ご確認ありがとうございます。

お手数ですがクラス名 has-background-text-font-family （一例）などに変更いただき、 theme.jsonについて以下に再度変更いただいてもよろしいでしょうか。

こちらはtheme.jsonの”styles”の中に”color””elements”と同階層に”blocks”をつくりその中に入れるでいいでしょうか？

以下は不要になりますので、以下と差し替えでお願いします。
```
"blocks": {
      "core/paragraph": {
  "color": {
    "text": "var(--wp--preset--color--primary)"
  },
  "css": "&.has-henny-penny-font-family { color: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--henny-penny) !important; }"
}
```
※has-henny-penny-font-family はもともとHenny Pennyにフォント指定するためのCSSクラスになります。
　上記has-nothing-you-could-do-font-family も同様に、「Nothing You Could Do」にフォント指定するためのクラスです。
　バリエーションに応じてフォントの入替をご希望とのことなので、どうしてもそれ以外のクラスを追記、登録いただく必要がございます。

加えて、halloween.json 側に以下の設定の追記をお願いします（blocks等の親設定は省略していますが、こちらも漏れなく追記をお願いします）。

こちらは入れ替えではなく「追記」でよろしいでしょうか？

申し訳ありません。
以下が不要となりますので、以下と差し替えでお願いします。
```
“vk-blocks/heading”: {
“color”: {
“text”: “var(–wp–preset–color–primary)”
},
“css”: “.wp-block-vk-blocks-heading h2, .wp-block-vk-blocks-heading .vk_heading_subtext, .vk_heading_subtext, .vk_heading_title { font-family: var(–wp–preset–font-family–henny-penny) !important; }”
}
```
2026年10月14日 1:40 PM #130770

webfactoryjp
参加者

すみません
私の理解が足りていないせいで何度も質問をしてしまいますが

thema.jsonには"blocks"の定義はありません(halloween.jsonにはあります。ハロウィン用のフォントを定義するため)
ですので、

以下は不要になりますので、以下と差し替えでお願いします。

とは、halloween.jsonの"blocks"でしょうか？
入れ替えてしまうとハロウィンスタイルでもPlayfair Displayが表示されてしまう気がしますが、わたし理解できていませんでしょうか？

結構混乱してますw

バリエーションに応じてフォントの入替をご希望とのことなので、どうしてもそれ以外のクラスを追記、登録いただく必要がございます。

ということはボタン一つでフォントもバッと変わるっていうのはできない。追加classを書き換えなければ実現できないという理解でいいでしょうか？

追記で問題ありません。
念のため、記載いただくのはstylesの括弧内にblocksを作成し、その中に更にcore/paragraphを作成いただく形になるかと思います。

こちらについてもhalloween.jsonにはもともと"styles"がありその中に"blocks"は既に記載があります(ハロウィンのフォント指定の内容)

もう一度確認お願いできますでしょうか
本当にすみません

2026年10月14日 1:59 PM #130771
Y.INABA
参加者
すみません、私が勘違いしていました。
theme.jsonの方に設定を追加した前提で話を進めていました。

改めて、 theme.json 側に以下設定の追記をお願いします。
```
"blocks": {
  "core/paragraph": {
    "color": {
      "text": "var(--wp--preset--color--primary)"
    },
    "css": "&.has-background-text-font-family { font-family: var(--wp--preset--font-family--playfair-display); }"
  }
}
```
halloween.json 側については、以下設定に差し替えをお願いします。
```
"core/paragraph": {
  "color": {
    "text": "var(--wp--preset--color--primary)"
  },
  "css": "&.has-background-text-font-family { font-family: var(--wp--preset--font-family--henny-penny) !important; }"
}
```
バリエーションに応じてフォントの入替をご希望とのことなので、どうしてもそれ以外のクラスを追記、登録いただく必要がございます。

ということはボタン一つでフォントもバッと変わるっていうのはできない。追加classを書き換えなければ実現できないという理解でいいでしょうか？

ご認識のとおりです。
ただし、一度バリエーション用のjsonを設定できてしまえば、後はワンタッチで変更可能かと思います（もちろん追加でバリエーションを設定いただく場合、書式は全て揃えていただく必要があるわけですが）。

元のテンプレートではhas-nothing-you-could-do-font-familyクラスが指定されており、従ってフォント「Nothing You Could Do」が適用されるようになっています。
そのため、当該クラスを消去して「Nothing You Could Do」を適用させなくするとともに、theme.jsonやhalloween.jsonなどに追加クラス用の設定内容を書いていただき、改めて追加したクラスを設定いただく必要があります。
2026年10月14日 2:45 PM #130772
webfactoryjp
参加者
ありがとうございます

無事に目的通りの表示にすることが出来ました

theme.json
```
{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [{
          "name": "Primary",
          "slug": "primary",
          "color": "#0ABAB5"
        },
        {
          "name": "Secondary",
          "slug": "secondary",
          "color": "#4DC9C2"
        },
        {
          "name": "Tertiary",
          "slug": "tertiary",
          "color": "#81D8D2"
        },
        {
          "name": "Quaternary",
          "slug": "quaternary",
          "color": "#C6EFEB"
        },
        {
          "name": "Primary Hover",
          "slug": "primary-hover",
          "color": "#099E9E"
        },
        {
          "name": "Background Primary",
          "slug": "bg-primary",
          "color": "#F1FFFB"
        },
        {
          "name": "Background Secondary",
          "slug": "bg-secondary",
          "color": "#f6ebe0"
        },
        {
          "name": "Background Tertiary",
          "slug": "bg-tertiary",
          "color": "#fff"
        },
        {
          "name": "Text Normal",
          "slug": "text-normal",
          "color": "#333"
        },
        {
          "name": "Text Secondary",
          "slug": "text-secondary",
          "color": "rgba(0,0,0,0.5)"
        },
        {
          "name": "Border Normal",
          "slug": "border-normal",
          "color": "rgba(0,0,0,0.1)"
        },
        {
          "name": "Background Dark",
          "slug": "bg-dark",
          "color": "#222"
        },
        {
          "name": "Background Dark Transparent",
          "slug": "bg-dark-transparent",
          "color": "rgba(0,0,0,0.05)"
        },
        {
          "name": "Text Normal Dark Background",
          "slug": "text-normal-darkbg",
          "color": "rgba(255,255,255,0.7)"
        },
        {
          "name": "Text Secondary Dark Background",
          "slug": "text-secondary-darkbg",
          "color": "rgba(255,255,255,0.6)"
        },
        {
          "name": "Border Normal Dark Background",
          "slug": "border-normal-darkbg",
          "color": "rgba(255,255,255,0.1)"
        },
        {
          "name": "Tiffany 001",
          "slug": "tiffany-color-001",
          "color": "#5DC1CF"
        },
        {
          "name": "Tiffany 002",
          "slug": "tiffany-color-002",
          "color": "#7EC9C1"
        },
        {
          "name": "Tiffany 003",
          "slug": "tiffany-color-003",
          "color": "#81CAC4"
        },
        {
          "name": "Attend",
          "slug": "attend-color",
          "color": "#5C6BC0"
        },
        {
          "name": "Soku",
          "slug": "soku-color",
          "color": "#0D3B66"
        },
        {
          "name": "Room",
          "slug": "room-color",
          "color": "#26A69A"
        },
        {
          "name": "Media",
          "slug": "media-color",
          "color": "#3163C8"
        }
      ]
    },
    "typography": {
      "fontFamilies": [{
          "name": "System Font",
          "slug": "system-font",
          "fontFamily": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif"
        },
        {
          "name": "Nothing You Could Do",
          "slug": "nothing-you-could-do",
          "fontFamily": "\"Nothing You Could Do\", cursive",
          "fontFace": [{
            "fontFamily": "Nothing You Could Do",
            "fontStyle": "normal",
            "fontWeight": "400",
            "src": ["file:./assets/fonts/nothing-you-could-do/nothing-you-could-do-400-normal.woff2"]
          }]
        },
        {
          "name": "Noto Sans JP",
          "slug": "noto-sans-jp",
          "fontFamily": "\"Noto Sans JP\", sans-serif",
          "fontFace": [{
              "fontFamily": "'Noto Sans JP', sans-serif",
              "fontStyle": "normal",
              "fontWeight": "400",
              "src": ["file:./assets/fonts/noto-sans-jp/noto-sans-jp-400-normal.woff2"]
            },
            {
              "fontFamily": "'Noto Sans JP', sans-serif",
              "fontStyle": "normal",
              "fontWeight": "100",
              "src": ["file:./assets/fonts/noto-sans-jp/noto-sans-jp-100-normal.woff2"]
            },
            {
              "fontFamily": "'Noto Sans JP', sans-serif",
              "fontStyle": "normal",
              "fontWeight": "600",
              "src": ["file:./assets/fonts/noto-sans-jp/noto-sans-jp-600-normal.woff2"]
            },
            {
              "fontFamily": "'Noto Sans JP', sans-serif",
              "fontStyle": "normal",
              "fontWeight": "900",
              "src": ["file:./assets/fonts/noto-sans-jp/noto-sans-jp-900-normal.woff2"]
            }
          ]
        },
        {
          "name": "Anton",
          "slug": "anton",
          "fontFamily": "Anton, sans-serif",
          "fontFace": [{
            "fontFamily": "Anton",
            "fontStyle": "normal",
            "fontWeight": "400",
            "src": ["file:./assets/fonts/anton/anton-400-normal.woff2"]
          }]
        },
        {
          "name": "Zen Old Mincho",
          "slug": "zen-old-mincho",
          "fontFamily": "\"Zen Old Mincho\", serif",
          "fontFace": [{
            "fontFamily": "Zen Old Mincho",
            "fontStyle": "normal",
            "fontWeight": "400",
            "src": ["file:./assets/fonts/zen-old-mincho/zen-old-mincho-400-normal.woff2"]
          }]
        },
        {
          "name": "Shippori Mincho",
          "slug": "shippori-mincho",
          "fontFamily": "\"Shippori Mincho\", serif",
          "fontFace": [{
            "fontFamily": "Shippori Mincho",
            "fontStyle": "normal",
            "fontWeight": "400",
            "src": ["file:./assets/fonts/shippori-mincho/shippori-mincho-400-normal.woff2"]
          }]
        },
        {
          "name": "LINE Seed JP",
          "slug": "line-seed-jp",
          "fontFamily": "\"LINE Seed JP\", sans-serif",
          "fontFace": [{
            "fontFamily": "LINE Seed JP",
            "fontStyle": "normal",
            "fontWeight": "700",
            "src": ["file:./assets/fonts/line-seed-jp/line-seed-jp-700-normal.woff2"]
          }]
        },
        {
          "name": "Playfair Display",
          "slug": "playfair-display",
          "fontFamily": "\"Playfair Display\", serif",
          "fontFace": [{
            "fontFamily": "Playfair Display",
            "fontStyle": "normal",
            "fontWeight": "400",
            "src": ["file:./assets/fonts/playfair-display/playfair-display-400-normal.woff2"]
          }]
        },
        {
          "name": "Source Serif Pro",
          "slug": "source-serif-pro",
          "fontFamily": "\"Source Serif Pro\", serif",
          "fontFace": [{
              "fontFamily": "Source Serif Pro",
              "fontStyle": "normal",
              "fontWeight": "100 900",
              "src": ["file:./assets/fonts/source-serif-pro/source-serif-pro-variable.woff2"]
            },
            {
              "fontFamily": "Source Serif Pro",
              "fontStyle": "italic",
              "fontWeight": "100 900",
              "src": ["file:./assets/fonts/source-serif-pro/source-serif-pro-italic-variable.woff2"]
            }
          ]
        },
        {
          "name": "Henny Penny",
          "slug": "henny-penny",
          "fontFamily": "\"Henny Penny\", system-ui",
          "fontFace": [{
            "fontFamily": "Henny Penny",
            "fontWeight": "400",
            "fontStyle": "normal",
            "src": [
              "file:./assets/fonts/henny-penny/HennyPenny-Regular.ttf"
            ]
          }]
        }
      ]
    }
  },

  "styles": {
    "blocks": {
      "core/paragraph": {
        "color": {
          "text": "var(--wp--preset--color--primary)"
        },
        "css": "&.has-background-text-font-family { font-family: var(--wp--preset--font-family--playfair-display); }"
      }
    }
  }

}
```
halloween.json
```
{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "title": "ハロウィン",
  "settings": {
    "color": {
      "palette": [{
          "name": "Primary",
          "slug": "primary",
          "color": "#F28C28"
        },
        {
          "name": "Secondary",
          "slug": "secondary",
          "color": "#7541A8"
        },
        {
          "name": "Tertiary",
          "slug": "tertiary",
          "color": "#292033"
        },
        {
          "name": "Quaternary",
          "slug": "quaternary",
          "color": "#FFF4E5"
        },
        {
          "name": "Primary Hover",
          "slug": "primary-hover",
          "color": "#D96B0B"
        },
        {
          "name": "Background Primary",
          "slug": "bg-primary",
          "color": "#FFF4E5"
        },
        {
          "name": "Background Secondary",
          "slug": "bg-secondary",
          "color": "#EEE4F5"
        },
        {
          "name": "Background Tertiary",
          "slug": "bg-tertiary",
          "color": "#FFFFFF"
        },
        {
          "name": "Text Normal",
          "slug": "text-normal",
          "color": "#292033"
        },
        {
          "name": "Text Secondary",
          "slug": "text-secondary",
          "color": "rgba(0,0,0,0.5)"
        },
        {
          "name": "Border Normal",
          "slug": "border-normal",
          "color": "rgba(0,0,0,0.1)"
        },
        {
          "name": "Background Dark",
          "slug": "bg-dark",
          "color": "#292033"
        },
        {
          "name": "Background Dark Transparent",
          "slug": "bg-dark-transparent",
          "color": "rgba(0,0,0,0.05)"
        },
        {
          "name": "Text Normal Dark Background",
          "slug": "text-normal-darkbg",
          "color": "rgba(255,255,255,0.7)"
        },
        {
          "name": "Text Secondary Dark Background",
          "slug": "text-secondary-darkbg",
          "color": "rgba(255,255,255,0.6)"
        },
        {
          "name": "Border Normal Dark Background",
          "slug": "border-normal-darkbg",
          "color": "rgba(255,255,255,0.1)"
        },
        {
          "name": "Tiffany 001",
          "slug": "tiffany-color-001",
          "color": "#5DC1CF"
        },
        {
          "name": "Tiffany 002",
          "slug": "tiffany-color-002",
          "color": "#7EC9C1"
        },
        {
          "name": "Tiffany 003",
          "slug": "tiffany-color-003",
          "color": "#81CAC4"
        },
        {
          "name": "Attend",
          "slug": "attend-color",
          "color": "#5C6BC0"
        },
        {
          "name": "Soku",
          "slug": "soku-color",
          "color": "#0D3B66"
        },
        {
          "name": "Room",
          "slug": "room-color",
          "color": "#26A69A"
        },
        {
          "name": "Media",
          "slug": "media-color",
          "color": "#3163C8"
        },
        {
          "name": "Purple",
          "slug": "purple",
          "color": "#7541A8"
        },
        {
          "name": "Cream",
          "slug": "cream",
          "color": "#FFF4E5"
        },
        {
          "name": "Gold",
          "slug": "gold",
          "color": "#A8C940"
        }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--bg-primary)",
      "text": "var(--wp--preset--color--text-normal)"
    },
    "elements": {
      "link": {
        "color": {
          "text": "var(--wp--preset--color--primary-hover)"
        }
      },
      "button": {
        "color": {
          "text": "#FFFFFF",
          "background": "var(--wp--preset--color--primary)"
        },
        "border": {
          "radius": "8px"
        }
      }
    },
    "blocks": {
      "core/paragraph": {
        "color": {
          "text": "var(--wp--preset--color--primary)"
        },
        "css": "&.has-background-text-font-family { font-family: var(--wp--preset--font-family--henny-penny) !important; }"
      }
    }
  }
}
```
当該のパターンブロック『見出し_背景手書き英語_中央_プライマリー』の追加CSSに設定されている既存の『has-nothing-you-could-do-font-family』と入れ替えて、
上記theme.jsonとhalloween.jsonをアップロード。
キャッシュを解除してスタイルをリセット。
ハロウィンのスタイルを選択すると当該部分のフォントが切り替わったことを確認しました。
さて、デフォルトに戻るのか…ですが、
デフォルトを押してもフォントはplayfairdisplayにならず、hennypennyのまま…一瞬ダメかと思いましたが、「そうだリセットだ」と思い出し、リセットを押下したら、見事デフォルトがplayfairdisplayに戻りました

ここ数日間、jsonファイルたちと格闘し、生成AIにコード書かせたり試行錯誤しましたが、最後の砦のベクトルフォーラムに助けられました

このhalloween.jsonファイルを基本モデルにして、クリスマス用、お正月用、春用、夏用…と挑戦していこうと思います

対馬様、Y.INABA様ありがとうございました。
2026年10月14日 3:08 PM #130773

Y.INABA
参加者

本件、解決いただいて何よりです。
お手すきの際に解決済になさってくださいませ。

私としてもtheme.jsonまわりについては対応経験が浅く、知見を深める良い機会になりました。
こちらこそお礼を申し上げます。

また何かありましたらお気軽にご質問くださいませ。
投稿者

投稿