Separate font family as a variable

[joshjhall]

Created two new variables --font-family and --font-variation-settings to allow overriding the font family on an individual basis.

Also added the variable --font-size to the dark theme list to ensure the dark.css is generated with the variable set correctly. Seemed like an oversight, but perhaps there's some fallback I'm unaware of that would set it anyway.

Example of using this to override the font-family...

@import url("https://linuz90.github.io/better-roam-research/main.css");

@font-face {
  font-family: "Lexend";
  src: url("https://www.lexend.com/static/fonts/lexendgx.woff2") format("woff2"), url("https://www.lexend.com/static/fonts/lexendgx.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-optical-sizing: auto;
}

:root {
  --font-family: Lexend, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-variation-settings: 'LXND' 10;
}

[joshjhall]

Sorry.. that example doesn't quite work in Roam. This will though...

Block 1 - Import core css

@import url("https://joshjhall.github.io/better-roam-research/main.css");

Block 2 - Load the font and modify the variables

@font-face {
  font-family: "Lexend";
  src: url("https://www.lexend.com/static/fonts/lexendgx.woff2") format("woff2"), url("https://www.lexend.com/static/fonts/lexendgx.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-optical-sizing: auto;
}
:root {
  --font-family: Lexend, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-variation-settings: 'LXND' 10;
}

[joshjhall]

Found one small bug where the font-family was being inherited from site.css instead of this for H2 titles.