DEV: Use a special import to declare font faces (PR #10583)

Update discourse-fonts to v0.0.3.

Follow-up to 7b7357147e458c5c4b268a3ae9a8d40515fb526d.

GitHub

The variables scss file is included in each stylesheet so importing the fonts here will inject the font styles to each stylesheet too (plugins, themes, components, mobile, desktop).

I think you can load the selected @font-face styles in foundation/base.scss and the full list of styles and classes in in wizard.scss.

Having a class definition per font makes sense for the wizard, but it’s not necessary for the regular app. I think you can just do

:root {
  --font-family: #{SiteSetting.base_font};
}

in the regular app. That also allows themes to more easily override the base font. Doing this introduces a small caching issue, the stylesheet cache would need to be cleared every time the font site setting is updated.

I added @import "font" to common.scss, as I used to do before switching to the “special import”.

It is what I am using now and I introduced two imports to achieve that: font and wizard_fonts.

Previously we had Helvetica, Arial, sans-serif for the font-family, because Helvetica is not available by default in Windows machines, so the default font would fall back to Arial there. I wonder whether we should include the fallbacks, at least for the default, non-custom font.

Changes look great!

Do you know if it’s possible to add a test to ensure that the stylesheets include the font styles? Maybe one for core and another for the wizard?