Easy-to-access font variable

[peterkos]

It'd be nice if fonts were set via a variable, e.g.:

--font-title: "Fira Sans", sans-serif;
--font-body: "Fira Sans", sans-serif;
--font-nav: "Fira Sans", sans-serif;

(rough list)

Currently, to change the fonts, it's a bit messy:

.post-title, .post-subtitle, .post-nav, .related-title, thead, dt,
.post-body h1,
.post-body h2,
.post-body h3,
.post-body h4,
.post-body h5,
.post-body h6, {
    font-family: "Fira Sans", sans-serif;
}

(And that's only a subset of the selectors!)

[reuixiy]

Hmmm, the code you pasted here is actually the production version generated by SCSS.

In our codebase, it looks like this:

https://github.com/reuixiy/hugo-theme-meme/blob/ff744203ea3287b3e317bb0b439ee8bb529aa038/assets/scss/base/_font-family.scss#L19-L28

https://github.com/reuixiy/hugo-theme-meme/blob/ff744203ea3287b3e317bb0b439ee8bb529aa038/assets/scss/main.scss#L104-L106

and the value of SCSS variable $fontFamilyHeadings comes from config.toml (via Hugo's resources.ExecuteAsTemplate function)

https://github.com/reuixiy/hugo-theme-meme/blob/ff744203ea3287b3e317bb0b439ee8bb529aa038/config-examples/en/config.toml#L939-L940

So it's easy-to-access for users already.

Also, the font-family related code in MemE all categorized into _font-family.scss, which improves the maintainability. Though we might repeat the code a bit (the selectors).

The CSS variables you mentioned here, maybe we can use it to replace the SCSS variables, so that user can easily customize font-familys on browser via JavaScript. But guess that's another new feature for MemE.