diff --git a/src/components/app/app.scss b/src/components/app/app.scss
index 2c5bc69..cb222b9 100644
--- a/src/components/app/app.scss
+++ b/src/components/app/app.scss
@@ -1,6 +1,6 @@
 #app
 {
-    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    font-family: var(--font);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
@@ -23,4 +23,6 @@
     --assignment-type-2: #3f991e;
     --assignment-type-3: #ff9900;
     --assignment-type-4: #b02b02;
+
+    --font: 'Avenir', Helvetica, Arial, sans-serif;
 }
diff --git a/src/pages/overall/overall.scss b/src/pages/overall/overall.scss
index e4a395e..87e0e7c 100644
--- a/src/pages/overall/overall.scss
+++ b/src/pages/overall/overall.scss
@@ -30,7 +30,7 @@
 .gpa.text
 {
     font-size: 35px;
-    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    font-family: var(--font);
 }
 
 .gpa.max