Is that possible the override Discourse variables?

Support

AI-generated summary

A user, bekircem, is trying to customize typography in Discourse by changing variables such as font family and size. However, the changes made to variables like $heading-font-family are not visible. bekircem has attempted to override the variables using different methods, including adding CSS code.

bebircem explains that while Discourse has a default feature for font selection, the goal is to achieve more detailed typography customization by changing the values of variables.

Renato suggests that overriding CSS variables can be achieved by using the correct syntax, as demonstrated in the example code provided. This approach allows for customizing font families and sizes.

bebircem notes that running the setup wizard, as suggested by codinghorror, only provides a limited selection of fonts.

By using the approach suggested by Renato, it is possible to override the variables and achieve the desired level of typography customization.

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?

2

Maybe have a look at https://meta.discourse.org/t/selectable-font-family-component/117493?

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?

4

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

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.

6

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

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 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;
}