diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 49eb1a0..4aacee2 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -68,11 +68,13 @@ $primary: $red; // Default: $blue
 @font-face {
   font-family: 'Century Gothic';
   src: url('../font/GOTHICB.TTF') format('truetype');
+  font-display: fallback;
 }
 
 @font-face {
   font-family: 'Eras ITC';
   src: url('../font/ERASMD.TTF') format('truetype');
+  font-display: fallback;
 }
 
 :target::before {
@@ -96,14 +98,14 @@ $primary: $red; // Default: $blue
 
 h1,
 h2 {
-  font-family: 'Century Gothic', sans-serif;
+  font-family: 'Century Gothic', var(--#{$prefix}font-sans-serif);
 }
 
 h3,
 h4,
 h5,
 h6 {
-  font-family: 'Eras ITC', sans-serif;
+  font-family: 'Eras ITC', var(--#{$prefix}font-sans-serif);
 }
 
 h1:hover .anchor-link,
@@ -158,7 +160,7 @@ body.is-scrolled .navbar {
 .nav-item,
 .nav-link {
   @extend .text-white;
-  font-family: 'Eras ITC', sans-serif;
+  font-family: 'Eras ITC', var(--#{$prefix}font-sans-serif);
 }
 
 .navbar-nav .btn {