公開されたページがテーマ設定の --font-family および --header-font-family を使用しない

バグ
1

公開されたページでは、テーマによって設定された --font-family および --heading-font-family を使用することができません。

再現手順：

  • テーマを作成し、CSS に以下を入力します。
:root {
    --font-family: CommonTestFont;
    --heading-font-family: CommonTestHeaderFont;
}
  • color-definitions に以下を入力します。
:root {
    --font-family: ColDefTestFont;
    --heading-font-family: ColDefTestHeaderFont;
}

通常のページでは、次の順序でそれらが使用されます（優先度 高 - 低）。

  • common で定義された変数
  • サイト設定によって定義された変数
  • color-definitions で定義された変数

image

公開されたページでは、次の順序でそれらが使用されます（優先度 高 - 低）。

  • サイト設定によって定義された変数
  • color-definitions で定義された変数
  • common で定義された変数

image

ここで 2 つのことが起こっています。

  1. color-definitions の CSS ファイルは、サイト設定によって定義されたフォント変数を、テーマの color-definitions セクションの :root の後に配置し、上書きしています。
  2. 公開されたページでは、color-definitions の CSS がページの body 内にロードされるため、CSS のロード順序が異なり、そこで定義された変数がテーマの common CSS を上書きしています。
「いいね！」 1