diff --git a/publishing/brand.css b/publishing/brand.css
index 9415f89..8374128 100644
--- a/publishing/brand.css
+++ b/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;
+}