Use CSS variables for font-family definition

[silverwind]

Fonts are currently set by Less variables which cannot be overridden at runtime. I'd propose a method that makes this possible so users can do this both via a custom .css file or even using a userstyle in their browser if they so desire. In our code we would have something like:

:root {
  --fonts-proportional: -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto;
  --fonts-monospace: 'SF Mono', Consolas, Menlo, 'Liberation Mono', Monaco, 'Lucida Console';
  --fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
  font-family: var(--fonts-proportional) var(--fonts-emoji);
}

pre, code {
  font-family: var(--fonts-monospace);
}

A user can then override via:

@font-face {
  font-family: 'Lato';
}

:root {
  --fonts-proportional: Lato;
}

Depends on: #6147