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:

hugo-theme-meme/assets/scss/base/_font-family.scss

Lines 19 to 28 in ff74420

	@if variable-exists("fontFamilyHeadings") {
	.post-body {
	h1, h2, h3, h4, h5, h6 {
	font-family: $fontFamilyHeadings;
	}
	}
	.contents-title {
	font-family: $fontFamilyHeadings;
	}
	}

hugo-theme-meme/assets/scss/main.scss

Lines 104 to 106 in ff74420

	{{ with .Site.Params.fontFamilyHeadings }}
	$fontFamilyHeadings: {{ $glyph }}{{ . }};
	{{ end }}

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

hugo-theme-meme/config-examples/en/config.toml

Lines 939 to 940 in ff74420

	# Headings, toc title
	fontFamilyHeadings = "'Comfortaa', sans-serif"

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.