optimise fonts

fonts are now loaded in a hierarchy:
- title: smallest, loads first, "riki's fluffy little house" characters only
- crit: loads next, contains ASCII + some other stuff, in weights 400-900 (for body text and headings)
- full: loads last, contains everything (italics & monospace too)

static/css/critical.css

@@ -72,6 +72,13 @@ footer.pink-space {
 
 /* Set up typography */
 
+:root {
+    --font-normal: "RecVar-Crit", "RecVar-Full", sans-serif;
+    --font-italic: "RecVar-Full", "RecVar-Crit", sans-serif;
+    --font-code: "RecVar-Full", monospace;
+    --font-title: "RecVar-Title", "Arial Black", sans-serif;
+}
+
 html {
     font-size: 62.5%;
 }
@@ -88,10 +95,11 @@ button,
 select,
 input,
 dfn {
-    font-family: "RecVar", sans-serif;
-    font-style: normal;
+    font-family: var(--font-normal);
     line-height: 1.5;
     text-size-adjust: none;
+    font-style: normal;
+    --recursive-slnt: 0;
 }
 
 pre,
@@ -105,9 +113,10 @@ input {
 
 :root {
     font-weight: 450;
-    font-style: normal;
     --recursive-mono: 0;
     --recursive-crsv: 0.5;
+    font-style: normal;
+    --recursive-slnt: 0;
 }
 
 *,
@@ -115,8 +124,10 @@ input {
 *:after {
     font-variation-settings:
         "MONO" var(--recursive-mono),
-        "CRSV" var(--recursive-crsv);
+        "CRSV" var(--recursive-crsv),
+        "slnt" var(--recursive-slnt);
     font-feature-settings: "ss03", "ss04", "ss05", "ss06", "ss08";
+    font-synthesis: none; /* Chrome: synthesises italics on top of using the font's built-in italic (????) */
 }
 
 h1 {
@@ -144,6 +155,7 @@ h4 {
 }
 
 code {
+    font-family: var(--font-code);
     --recursive-mono: 0.5;
 }
 
@@ -151,6 +163,7 @@ pre,
 pre code,
 kbd,
 th-literate-program {
+    font-family: var(--font-code);
     --recursive-mono: 1;
     font-weight: 450;
     tab-size: 4;
@@ -168,6 +181,8 @@ strong {
 i,
 em {
     --recursive-crsv: 1;
+    --recursive-slnt: -15; /* required for Chrome */
+    font-family: var(--font-italic);
     font-style: italic;
 }
 
@@ -552,6 +567,7 @@ header.floof {
         line-height: 1;
         width: min-content;
 
+        font-family: var(--font-title);
         font-weight: 900;
         font-size: 5.6rem;
         text-align: right;