docs site: make Figtree actually apply, and size headings like the website

Material emits its own font variables and defines --md-text-font-family on <body>,
so brand.css's :root value lost to it by DOM proximity -- the same failure mode as the
palette, and the reason the site rendered entirely in the system font stack with
Material's default 32px/300 headings.

theme.font: false stops Material supplying typography, and brand.css now declares the
font on body, the navigation, the header and every heading, with heading sizes closer to
the website. Figtree is still self-hosted from publishing/fonts.

publishing/brand.css

@@ -143,3 +143,53 @@
 .md-typeset .admonition.warning {
   border-color: var(--earth-red);
 }
+
+/* ---------- Typography: make Figtree actually apply ----------
+ * Material renders body and headings with var(--md-text-font-family) and defines that
+ * variable on <body>, so a :root definition loses to it by proximity in the DOM -- the
+ * same way the colours lost to the palette. Declare the font on the elements themselves
+ * as well, and size headings closer to the website rather than Material's defaults.
+ */
+body,
+.md-typeset,
+.md-nav,
+.md-header,
+.md-tabs {
+  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
+    Arial, sans-serif;
+}
+
+.md-typeset h1,
+.md-typeset h2,
+.md-typeset h3,
+.md-typeset h4,
+.md-typeset h5,
+.md-typeset h6,
+.md-header__title {
+  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
+    Arial, sans-serif;
+}
+
+.md-typeset h1 {
+  font-size: 2.6rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--ink);
+}
+
+.md-typeset h2 {
+  font-size: 1.7rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--ink);
+}
+
+.md-typeset h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--ink);
+}
+
+.md-header__title {
+  font-weight: 600;
+}