Change fonts to WOFF

_scss/_base.scss

@@ -1,6 +1,7 @@
 body {
 	image-rendering: pixelated;
 	line-height: 1.6;
+	font-family: Atkinson sans;
 	font-size: 18px;
 	color: $foreground-color;
 	background: $background-color;
@@ -21,8 +22,8 @@ body {
 	justify-content: right;
 	align-items: left;
 	text-align: left;
-	margin-left: 40em;
-	margin-right: 40em;
+	margin-left: $content-gap;
+	margin-right: $content-gap;
 }
 
 /* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */
@@ -47,6 +48,10 @@ h3 {
 	margin-top: 1cm;
 	margin-bottom: 0;
 }
+h4 {
+	margin-top: 0.5cm;
+	margin-bottom: 0;
+}
 
 
 ::selection {
@@ -114,3 +119,7 @@ code, pre {
 code {
 	display: inline;
 }
+
+.footnote-definition p {
+	display: inline;
+}

style.scss

@@ -4,10 +4,32 @@ $accent-color: #ca9ee6;
 $accent-color-light: #f4b8e4;
 $accent-color-dark: #ea999c;
 $radius: 10px;
+$content-gap: 30em;
 
 @font-face {
 	font-family: Cozette;
-	src: url(/assets/CozetteVector.otf);
+	src: url(/assets/fonts/CozetteVector.woff2);
+}
+
+@font-face {
+	font-family: Atkinson;
+	src: url(/assets/fonts/Atkinson-Hyperlegible-Regular-102.woff);
+}
+@font-face {
+	font-family: Atkinson;
+	src: url(/assets/fonts/Atkinson-Hyperlegible-Bold-102.woff);
+	font-weight: bold;
+}
+@font-face {
+	font-family: Atkinson;
+	src: url(/assets/fonts/Atkinson-Hyperlegible-Italic-102.woff);
+	font-style: italic;
+}
+@font-face {
+	font-family: Atkinson;
+	src: url(/assets/fonts/Atkinson-Hyperlegible-BoldItalic-102.woff);
+	font-weight: bold;
+	font-style: italic;
 }
 
 @import '_scss/base', '_scss/navigation';