diff --git a/src/scss/base.scss b/src/scss/base.scss
index 593a4eb..e2af92e 100644
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css?family=Exo:300,300i,900,900i|Fira+Sans+Extra+Condensed:300,700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@400;700&family=Exo:ital,wght@0,300;0,900;1,300;1,900&family=Zilla+Slab:wght@700&display=swap");
 @import "variables";
 @import "mixins";
 @import "flex";
@@ -8,12 +8,41 @@
 }
 
 :root {
-  font-family: "Fira Sans Extra Condensed", sans-serif;
+  font-family: "Dosis", sans-serif;
   font-size: 16px;
   line-height: 1.5;
   text-size-adjust: 100%;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Zilla Slab", sans-serif;
+}
+
+h1 {
+  font-size: 3em;
+}
+
+h2 {
+  font-size: 1.825em;
+
+  @include mq-desktop {
+    font-size: 2.25em;
+  }
+}
+
+h3 {
+  font-size: 1.125em;
+
+  @include mq-desktop {
+    font-size: 1.5em;
+  }
+}
+
 a {
   color: $copy-color;
 }
@@ -30,24 +59,24 @@ a {
 
   &::before,
   &::after {
-      content: "";
-      position: absolute;
-      border-radius: 100%;
+    content: "";
+    position: absolute;
+    border-radius: 100%;
   }
 
   &::before {
-      background-color: rgba(lighten($bg-color-dark, 10%), 0.7);
-      height: 80vw;
-      width: 80vw;
-      bottom: -45vw;
-      right: -25vw;
+    background-color: rgba(lighten($bg-color-dark, 10%), 0.7);
+    height: 80vw;
+    width: 80vw;
+    bottom: -45vw;
+    right: -25vw;
   }
 
   &::after {
-      background-color: rgba(lighten($bg-color-dark, 10%), 0.7);
-      height: 80vw;
-      width: 80vw;
-      bottom: -25vw;
-      right: -50vw;
+    background-color: rgba(lighten($bg-color-dark, 10%), 0.7);
+    height: 80vw;
+    width: 80vw;
+    bottom: -25vw;
+    right: -50vw;
   }
 }