Is that possible the override Discourse variables?

Hi,

I am trying to change typography like font-family, font-weight and font sizes with Discourse variables.

$base-font-family: var(--font-family) !default;
$heading-font-family: var(--heading-font-family) !default;

So how I can change heading-font-family variable like $heading-font-family: Arial; ? I’ve tried several methods but the changes are not visible.

$heading-font-family: Arial;

:root {
  --heading-font-family: Arial;
}

Any idea?

1 Like

Maybe have a look at Selectable Font Family Component?

4 Likes

Thanks for the reply.

Actually there is a default Discourse feature for that. But I want to make a more detailed typography customization.

So I’m looking for a way to change the values of variables. So I thought I could easily change the entire typography.

from variables.scss

// Fonts
// --------------------------------------------------

$base-font-size-smallest: 0.815em !default; // eq. to 13px
$base-font-size-smaller: 0.875em !default; // eq. to 14px
$base-font-size: 0.938em !default; // eq. to 15px
$base-font-size-larger: 1.063em !default; // eq. to 17px
$base-font-size-largest: 1.118em !default; // eq. to 19px
$base-font-family: var(--font-family) !default;
$heading-font-family: var(--heading-font-family) !default;

// Font-size defintions, multiplier ^ (step / interval)
$font-up-6: 2.296em;
$font-up-5: 2em;
$font-up-4: 1.7511em;
$font-up-3: 1.5157em;
$font-up-2: 1.3195em;
$font-up-1: 1.1487em; // 2^(1/5)
$font-0: 1em;
$font-down-1: 0.8706em; // 2^(-1/5)
$font-down-2: 0.7579em; // Smallest size we use based on the 1em base
$font-down-3: 0.6599em;
$font-down-4: 0.5745em;
$font-down-5: 0.5em;
$font-down-6: 0.4355em;

Do you think is that possible to change these variables?

2 Likes

Oh. I thought that seemed old and there was now a better way. Sorry about that.

2 Likes

Thank you for the answer @pfaffman I hope there is some way to override these variables. Otherwise, I will need to change CSS classes.

1 Like

Re-run the setup wizard, font selection is now a step in the setup wizard as of the 2.6 beta release.

4 Likes

Thank you for the reply @codinghorror. That way we can only choose certain fonts, right? And I learned that these variables cannot be override. Is it correct?