diff --git a/public/css/style.scss b/public/css/style.scss
index 0b3986032..871a30710 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=IBM+Plex+Mono&family=Inconsolata&family=Roboto+Mono&family=Source+Code+Pro&display=swap');
 
 :root {
   --roundness: 0.25rem;
@@ -1813,6 +1813,7 @@ key {
     &.languages,
     &.layouts,
     &.keymapLayout,
+    &.fontFamily,
     &.funbox {
       grid-template-columns: 1fr;
       grid-template-areas:
@@ -2333,4 +2334,4 @@ key {
 .r5 {
   display: grid;
   grid-template-columns: 4fr 7.5fr 4fr;
-}
\ No newline at end of file
+}
diff --git a/public/index.html b/public/index.html
index 07377c06f..d83051a35 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1123,6 +1123,17 @@
           <div class="buttons">
           </div>
         </div>
+        <div class="section fontFamily">
+          <h1>font family</h1>
+          <div class="text">Change the font family for the site</div>
+          <div class="buttons">
+            <div class="button" style="font-family:Roboto Mono" id="Roboto Mono" fontfamily="Roboto Mono" tabindex="0" onclick="this.blur(); changeFont(this.id);">Roboto Mono</div>
+            <div class="button" style="font-family:Source Code Pro" id="Source Code Pro" fontfamily="Source Code Pro" tabindex="0" onclick="this.blur(); changeFont(this.id);">Source Code Pro</div>
+            <div class="button" style="font-family:IBM Plex Mono" id="IBM Plex Mono" fontfamily="IBM Plex Mono" tabindex="0" onclick="this.blur(); changeFont(this.id);">IBM Plex Mono</div>
+            <div class="button" style="font-family:Inconsolata" id="Inconsolata" fontfamily="Inconsolata" tabindex="0" onclick="this.blur(); changeFont(this.id);">Inconsolata</div>
+            <div class="button" style="font-family:Fira Code" id="Fira Code" fontfamily="Fira Code" tabindex="0" onclick="this.blur(); changeFont(this.id);">Fira Code</div>
+          </div>
+        </div>
         <div class="section funbox">
           <h1>funbox</h1>
           <div class="buttons">
@@ -1636,4 +1647,4 @@
 <script src="js/account.js?v=46"></script>
 <script src="js/script.js?v=46"></script>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/public/js/script.js b/public/js/script.js
index ba5b95353..fc92b8cc8 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -295,9 +295,9 @@ function verifyUsername() {
 
   $(".nameChangeMessage").click((e) => {
     alert(`Im currently preparing the system to be ready for leaderboards and other awesome features - it looks like you need to change your display name.
-    
+
     It either contains special characters, or your display name is the same as someone elses and your account was made later.
-    
+
     Sorry for this inconvenience.
     `);
     let newName = prompt(
@@ -2734,6 +2734,10 @@ function hideCustomTextPopup() {
   }
 }
 
+function changeFont(font_id) {
+  document.documentElement.style.setProperty('--font', font_id);
+};
+
 $("#customTextPopupWrapper").click((e) => {
   if ($(e.target).attr("id") === "customTextPopupWrapper") {
     hideCustomTextPopup();