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

[RGJ (Richard - Communiteq)]

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

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

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.

[nat (Natalie T)]

Thanks for the report, appreciate the sleuthing.

I’ve informed the appropriate team for their prioritisation.

[jordan.vidrine]

Thanks for reporting! The fix for this has been applied in this PR, which we just merged.

https://github.com/discourse/discourse/pull/36325