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?
Discourse is incredibly customizable!
The goal of this topic is to show you how make use of all the amazing options that are available to you as a theme developer. You know… so that you don’t have to reinvent the wheel
Variables? What variables?
Variables cover a large number of things, from font sizes to colors to z-index values. You can use and override the vast majority of variables in your theme editor.
Colors
There are many colors available for you to use or override in your th…
1 Like
pfaffman
(Jay Pfaffman)
November 17, 2020, 10:57pm
2
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
pfaffman
(Jay Pfaffman)
November 17, 2020, 11:18pm
4
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?
renato
(Renato Atilio)
December 24, 2020, 1:49am
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