Published pages do not use theme-set --font-family and --header-font-family

Bug
1

On published pages, it’s impossible to use --font-family and --heading-font-family set by a theme.

Repro:

  • create a theme and enter this in CSS
:root {
    --font-family: CommonTestFont;
    --heading-font-family: CommonTestHeaderFont;
}
  • and this in color-definitions
:root {
    --font-family: ColDefTestFont;
    --heading-font-family: ColDefTestHeaderFont;
}

A regular page will use them in this order (priority high - low)

  • variables defined in common
  • variables defined by site settings
  • variables defined in color-definitions

image
image477×353 13.3 KB

A published page will use them in this order (priority high-low)

  • variables defined by site settings
  • variables defined in color-definitions
  • variables defined in common

image
image479×328 12.5 KB

Two things are happening here.

  1. the color-definitions CSS file puts the font-variables defined by the site settings after the :root from the themes color-definitions section, overriding them
  2. in a published page, the CSS load order is different, because the color-definitions CSS is loaded in the body of the page, so the variables defined in there are overriding the theme common CSS.
1 Like