feat: add monospace font

config/design-tokens/fonts.json

@@ -40,5 +40,21 @@
         "weight": 650
       }
     }
+  },
+  "monospace": {
+    "family": "IBM Plex Mono",
+    "format": "truetype",
+    "weights": {
+      "Regular": {
+        "path": "/ibmplexmono/IBMPlexMono-Regular.ttf",
+        "font-style": "normal",
+        "weight": 400
+      },
+      "Italic": {
+        "path": "/ibmplexmono/IBMPlexMono-Italic.ttf",
+        "font-style": "italic",
+        "weight": 400
+      }
+    }
   }
 }

src/colophon.md

@@ -35,7 +35,7 @@ Code formatting is applied by [Prism][prismjs] and uses a tweaked version of the
 
 ## Design
 
-Headings are using the [Anek Latin][aneklatin] font, and the body font is [iA Writer Quattro][iawriterquattro].
+Headings are using the [Anek Latin][aneklatin] font, and the body font is [iA Writer Quattro][iawriterquattro]. Monospace font is [IBM Plex Mono][ibmplexmono].
 
 The colour palette is viewable on the [styleguide][styleguide] page.
 
@@ -90,3 +90,4 @@ I've done my best to show where I found any code I did not write myself.
 [everylayout]: https://every-layout.dev
 [prismjs]: https://prismjs.com
 [tokyonight]: https://github.com/folke/tokyonight.nvim
+[ibmplexmono]: https://fonts.google.com/specimen/IBM+Plex+Mono

src/css/global/global-styles.css

@@ -123,9 +123,13 @@ hr {
   color: var(--color-surface);
 }
 
+code {
+  font-family: var(--font-family-monospace);
+}
+
 :not(pre) > code {
   background-color: var(--color-surface);
-  border-radius: var(--spacing-\0.5);
+  border-radius: var(--spacing-0\.25);
   padding-block: 0.15em;
   padding-inline: 0.25em;
 }