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)

content/treehouse/dev/fonts.dj

@@ -0,0 +1,27 @@
+title = "Font set testing page"
+
++++
+
+If all the characters appear in Recursive, all's right with the world.
+
+≠²³¢€½§·«»–¸
+πœę©ß←↓→óþ¨~
+ąśðæŋ’ə…ł´^
+żźć„”ńµ≤≥ḷ
+
+*bold text*
+
+_italic text_
+
+```cpp
+// This is a bit of code.
+int main(void) { return 0; }
+```
+
+# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4

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;

static/css/noncritical.css

@@ -15,6 +15,7 @@ dialog[open] {
 /* Command line */
 
 th-command-line {
+    font-family: var(--font-code);
     --recursive-mono: 1;
 
     display: none;
@@ -248,6 +249,7 @@ th-literate-program[data-mode="output"] {
 
 .th-syntax-highlighting span {
     &.comment {
+        --recursive-slnt: -8;
         font-style: oblique 8deg;
         color: var(--syntax-comment);
     }

static/css/page/tairu.css

@@ -31,6 +31,7 @@
     & .south,
     & .west,
     & .north {
+        font-family: var(--font-code);
         font-weight: 900;
         font-style: normal;
         --recursive-mono: 1;
@@ -108,6 +109,7 @@
 
 .tileset-four-to-eight-demo th-bc {
     & .directions-square {
+        font-family: var(--font-code);
         font-weight: 900;
         font-style: normal;
         --recursive-mono: 1;

static/css/tree.css

@@ -41,6 +41,7 @@
 }
 
 .breadcrumb a {
+    font-family: var(--font-code);
     --recursive-mono: 1;
     font-weight: 500;
 

static/font/Makefile

@@ -0,0 +1,25 @@
+TITLE := "riki's fluffy little house"
+CRIT_RANGES := "U+0020-007E,U+00A9,U+00B0,0+00D7,U+00F7,U+2000-206F"
+OT_FEATURES := \
+	--layout-features+="ss03,ss04,ss05,ss06,ss08" \
+	--layout-features-="dlig,case,frac,afrc,ordn,titl,sups,numr,sinf,dnom,zero,ss20,pnum,liga"
+
+all: recursive-casl0.woff2 recursive-crit.woff2 recursive-title.woff2
+
+recursive-casl0.woff2: recursive.woff2
+	fonttools varLib.instancer $? -o $@ CASL=0
+
+recursive-crit.woff2: recursive-subset-crit.woff2
+	fonttools varLib.instancer $? -o $@ --static wght=400:900
+
+recursive-title.woff2: recursive-subset-title.woff2
+	fonttools varLib.instancer $? -o $@ --static wght=800:900
+
+recursive-subset-crit.woff2: recursive.woff2
+	fonttools subset $? --output-file=$@ --unicodes=$(CRIT_RANGES) $(OT_FEATURES) --ignore-missing-glyphs
+
+recursive-subset-title.woff2: recursive.woff2
+	fonttools subset $? --output-file=$@ --text=$(TITLE) $(OT_FEATURES) --ignore-missing-glyphs
+
+clean:
+	rm recursive-*.woff2

static/font/README.txt

@@ -1,6 +1 @@
-To produce recursive-casl0.woff2:
-
-    fonttools varLib.instancer Recursive_VF_1.085.woff2 -o recursive-casl0.woff2 CASL=0
-
-Further optimisations can be done to the font, but removing the CASL axis makes the biggest difference.
-It is not used anywhere on the website anyways, and saves about half the download size of the font.
+To derive subsets of the font, see the Makefile.

template/_doc.hbs

@@ -5,7 +5,16 @@
 <head>
     {{> components/_head.hbs }}
 
-    <link rel="stylesheet" href="{{ asset 'css/doc.css' }}">
+    <style>{{{ include_static 'css/doc.css' }}}</style>
+</head>
+
+<body>
+    {{> components/_sidebar.hbs }}
+    {{~> components/_doc.hbs }}
+    {{~> components/_pink_space.hbs }}
+
+    <th-overlays></th-overlays>
+    <th-command-line></th-command-line>
 
     {{#each page.styles}}
     <link rel="stylesheet" href="{{ asset (cat 'css/' this) }}">
@@ -17,15 +26,6 @@
         import "{{ this }}";
         {{/each}}
     </script>
-</head>
-
-<body>
-    {{> components/_sidebar.hbs }}
-    {{~> components/_doc.hbs }}
-    {{~> components/_pink_space.hbs }}
-
-    <th-overlays></th-overlays>
-    <th-command-line></th-command-line>
 </body>
 
 </html>

template/components/_head.hbs

@@ -4,10 +4,43 @@
 
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
+<!-- -->
+<link rel="preload" href="{{ asset 'font/recursive-title.woff2' }}" as="font" type="font/woff2" crossorigin fetchpriority="high">
+<link rel="preload" href="{{ asset 'font/recursive-crit.woff2' }}" as="font" type="font/woff2" crossorigin>
+<!-- -->
+
 <style>
     @font-face {
-        font-family: "RecVar";
+        font-family: "RecVar-Full";
         src: url("{{{ asset 'font/recursive-casl0.woff2' }}}");
+        font-display: swap;
+        unicode-range: U+0-10FFFF;
+    }
+
+    @font-face {
+        font-family: "RecVar-Crit";
+        src: url("{{{ asset 'font/recursive-crit.woff2' }}}");
+        font-display: block;
+        font-weight: 400 900;
+        font-style: normal;
+        unicode-range: U+20-7E, U+2000-206F;
+    }
+
+    @font-face {
+        font-family: "RecVar-Crit";
+        src: url("{{{ asset 'font/recursive-casl0.woff2' }}}");
+        font-display: block;
+        font-style: normal;
+        unicode-range: U+80-1FFF, U+2070-10FFFF;
+    }
+
+    @font-face {
+        font-family: "RecVar-Title";
+        src: url("{{{ asset 'font/recursive-title.woff2' }}}");
+        font-display: block;
+        font-weight: 800 900;
+        font-style: normal;
+        unicode-range: U+20, U+27, U+65, U+66, U+68, U+69, U+6B, U+6C, U+6F, U+72, U+73, U+74, U+75, U+79;
     }
 </style>
 <style>{{{ include_static 'css/base.css' }}}</style>