Is that possible the override Discourse variables?

support
1

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
2

Maybe have a look at Selectable Font Family Component?

4 Likes
3

Thanks for the reply.

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

image
image1480×436 20.6 KB

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
4

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

2 Likes
5

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
6

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

4 Likes
7

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?

8

@bekircem I just tested the wizard on 2.7.0.beta1 and the available fonts are the same from the site settings you posted above (I may be missing something).

You probably figured it out by now, but just in case, you can use the Google Fonts theme component or you can replace the CSS variables just like you did on your OP - which should have worked.

I’m using this CSS in my instance and it works (loading the font via <link/> or @include).

:root {
  --heading-font-family: 'Inter', sans-serif;
  --font-family: 'Inter', sans-serif;
}
2 Likes