diff --git a/src/components/header.css b/src/components/header.css
index 578fe35428..db209eb0a0 100644
--- a/src/components/header.css
+++ b/src/components/header.css
@@ -1,4 +1,4 @@
-@import 'variables.css';
+@import "variables.css";
 
 header {
   width: 100%;
@@ -10,4 +10,5 @@ header svg {
 }
 .logo {
   padding-top: 2.5rem;
-}
\ No newline at end of file
+}
+
diff --git a/src/components/layout.css b/src/components/layout.css
index 704ed89842..023993ab35 100644
--- a/src/components/layout.css
+++ b/src/components/layout.css
@@ -1,7 +1,7 @@
-@import 'site-reset.css';
-@import 'typography.css';
-@import 'variables.css';
-@import 'grid.css';
+@import "site-reset.css";
+@import "typography.css";
+@import "variables.css";
+@import "grid.css";
 
 html {
   overflow-y: scroll;
@@ -42,8 +42,8 @@ p *:last-child {
 }
 ol,
 ul {
-    list-style-position: outside;
-    list-style-image: none;
+  list-style-position: outside;
+  list-style-image: none;
 }
 ul {
   list-style: none;
@@ -63,7 +63,7 @@ ul {
 }
 .skip-link:focus {
   top: 2rem;
-  outline: 5px solid rgba(0,0,0,0.1);
+  outline: 5px solid rgba(0, 0, 0, 0.1);
   transform: translateY(0%);
 }
 .text-hidden {
@@ -72,14 +72,14 @@ ul {
   height: 1px;
   display: inline-block;
   overflow: hidden;
-  position: absolute!important;
-  border: 0!important;
-  padding: 0!important;
-  margin: 0!important;
-  clip: rect(1px,1px,1px,1px);
+  position: absolute !important;
+  border: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px);
 }
 .hidden {
-  display:none;
+  display: none;
 }
 svg:not(:root) {
   overflow: hidden;
@@ -104,7 +104,7 @@ ul.inline-list > li {
   display: inline;
 }
 ul.inline-list > li:before {
-  content: ', ';
+  content: ", ";
 }
 ul.inline-list > li:first-child:before {
   content: normal;
@@ -124,5 +124,6 @@ ul.inline-list > li:first-child:before {
 .button:active {
   border-bottom: 0;
   color: #fff;
-  background-color: rgba(183,191,16,0.8);
-}
\ No newline at end of file
+  background-color: rgba(183, 191, 16, 0.8);
+}
+
diff --git a/src/components/variables.css b/src/components/variables.css
index 22f306bb21..9f15bf37c0 100644
--- a/src/components/variables.css
+++ b/src/components/variables.css
@@ -1,15 +1,26 @@
 :root {
-    --base-content-width: 37rem;
-    --base-content-spacing: 1.0rem;
-    --content-spacing-xl: 3.0rem;
-    --content-spacing-lg: 2.0rem;
-    --content-spacing-md: 1.5rem;
-    --content-spacing-sm: 0.5rem;
-    --content-spacing-xs: 0.25rem;
-    --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
-    --color-main: rgb(183,191,16);
-    --color-main-dk: rgb(164,171,15);
-    --color-gray: rgb(126, 126, 126);
-    --color-gray-lt: rgb(191,191,191);
-    --color-gray-dk: rgb(63,63,63);
-}  --header-footer-stack: "Departure Mono", var(--font-stack);
+  --base-content-width: 37rem;
+  --base-content-spacing: 1rem;
+  --content-spacing-xl: 3rem;
+  --content-spacing-lg: 2rem;
+  --content-spacing-md: 1.5rem;
+  --content-spacing-sm: 0.5rem;
+  --content-spacing-xs: 0.25rem;
+  --header-footer-stack: "Departure Mono", var(--font-stack);
+  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    sans-serif;
+  --color-main: rgb(183, 191, 16);
+  --color-main-dk: rgb(164, 171, 15);
+  --color-gray: rgb(126, 126, 126);
+  --color-gray-lt: rgb(191, 191, 191);
+  --color-gray-dk: rgb(63, 63, 63);
+}
+
+@font-face {
+  font-family: "Departure Mono";
+  src: url("../fonts/DepartureMono-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+}
+