Refactored fonts

- Added fonts as static assets. We no longer depend the client's system
  to have the fonts installed.
- Moved site wide monospace and sans-serif font families to a global variable.

_config.ts

@@ -11,6 +11,8 @@ const site = lume({
 
 site.ignore("README.md", "LICENSE.txt");
 
+site.copy("static", ".");
+
 site.use(jsx());
 site.use(nav());
 site.use(sass());

_includes/styles/base.scss

@@ -10,7 +10,7 @@ body {
   color: var(--color-fg);
   background: var(--color-bg);
   transition: color 0.5s, background-color 0.5s;
-  font-family: Ubuntu Nerd Font, Ubuntu, Inter, -apple-system, BlinkMacSystemFont, sans-serif;
+  font-family: var(--font--sans-serif);
   font-size: var(--text-base);
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -75,9 +75,9 @@ pre {
   overflow: auto;
   page-break-inside: avoid;
   word-wrap: break-word;
-  font-family: CaskaydiaCove Nerd Font Mono, monospace;
+  font-family: var(--font--mono);
   code {
-    font-family: CaskaydiaCove Nerd Font Mono, monospace;
+    font-family: var(--font--mono);
   }
 }
 

_includes/styles/fonts.scss

@@ -0,0 +1,24 @@
+@font-face {
+  font-family: "Ubuntu Nerd Font";
+  font-weight: normal;
+  src: url("/fonts/UbuntuNerdFont-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Ubuntu Nerd Font";
+  font-style: italic;
+  font-weight: normal;
+  src: url("/fonts/UbuntuNerdFont-Italic.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Ubuntu Nerd Font";
+  font-weight: bold;
+  src: url("/fonts/UbuntuNerdFont-Bold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "CaskaydiaCove Nerd Font Mono";
+  font-weight: normal;
+  src: url("/fonts/CaskaydiaCoveNerdFontMono-Regular.ttf") format("truetype");
+}

_includes/styles/variables.scss

@@ -23,4 +23,8 @@
 
   /* Widths */
   --page--max-width: 48rem;
+
+  /* Fonts */
+  --font--sans-serif: Ubuntu Nerd Font, Ubuntu, Inter, -apple-system, BlinkMacSystemFont, sans-serif;
+  --font--mono: CaskaydiaCove Nerd Font Mono, monospace;
 }

styles/main.scss

@@ -1,4 +1,5 @@
 // The foundation
+@import "styles/fonts";
 @import "styles/normalize";
 @import "styles/variables";
 @import "styles/color-palette";