diff --git a/public/css/style.scss b/public/css/style.scss
index 871a30710..311ea6e3d 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -1,4 +1,7 @@
 @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');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap');
 
 :root {
   --roundness: 0.25rem;
@@ -2334,4 +2337,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 91c44b18f..94ad6f4bb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1123,22 +1123,6 @@
           <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" fontFamily="Roboto_Mono" tabindex="0"
-              onclick="this.blur();">Roboto Mono</div>
-            <div class="button" style="font-family:Source Code Pro" fontFamily="Source_Code_Pro" tabindex="0"
-              onclick="this.blur();">Source Code Pro</div>
-            <div class="button" style="font-family:IBM Plex Mono" fontFamily="IBM_Plex_Mono" tabindex="0"
-              onclick="this.blur();">IBM Plex Mono</div>
-            <div class="button" style="font-family:Inconsolata" fontFamily="Inconsolata" tabindex="0"
-              onclick="this.blur();">Inconsolata</div>
-            <div class="button" style="font-family:Fira Code" fontFamily="Fira_Code" tabindex="0"
-              onclick="this.blur();">Fira Code</div>
-          </div>
-        </div>
         <div class="section funbox">
           <h1>funbox</h1>
           <div class="buttons">
@@ -1220,6 +1204,40 @@
           <div class="buttons">
           </div>
         </div>
+        <div class="section fontSize">
+          <h1>font size</h1>
+          <div class="text">Change the font size of the test words.</div>
+          <div class="buttons">
+            <div class="button" fontsize="1" tabindex="0" onclick="this.blur();">1</div>
+            <div class="button" fontsize="125" tabindex="0" onclick="this.blur();">1.25</div>
+            <div class="button" fontsize="15" tabindex="0" onclick="this.blur();">1.5</div>
+            <div class="button" fontsize="2" tabindex="0" onclick="this.blur();">2</div>
+          </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" fontFamily="Roboto_Mono" tabindex="0"
+              onclick="this.blur();">Roboto Mono</div>
+            <div class="button" style="font-family:Source Code Pro" fontFamily="Source_Code_Pro" tabindex="0"
+              onclick="this.blur();">Source Code Pro</div>
+            <div class="button" style="font-family:IBM Plex Mono" fontFamily="IBM_Plex_Mono" tabindex="0"
+              onclick="this.blur();">IBM Plex Mono</div>
+            <div class="button" style="font-family:Inconsolata" fontFamily="Inconsolata" tabindex="0"
+              onclick="this.blur();">Inconsolata</div>
+            <div class="button" style="font-family:Fira Code" fontFamily="Fira_Code" tabindex="0"
+              onclick="this.blur();">Fira Code</div>
+            <div class="button" style="font-family:Roboto" fontFamily="Roboto" tabindex="0" onclick="this.blur();">
+              Roboto</div>
+            <div class="button" style="font-family:Montserrat" fontFamily="Montserrat" tabindex="0"
+              onclick="this.blur();">Montserrat</div>
+            <div class="button" style="font-family:Titillium Web" fontFamily="Titillium_Web" tabindex="0"
+              onclick="this.blur();">Titillium Web</div>
+            <div class="button" style="font-family:Lexend Deca" fontFamily="Lexend_Deca" tabindex="0"
+              onclick="this.blur();">Lexend Deca</div>
+          </div>
+        </div>
         <div class="section flipTestColors">
           <h1>flip test colors</h1>
           <div class="text">By default, typed text is brighter than the future text. When enabled, the colors will be
@@ -1242,16 +1260,6 @@
             <div class="button on" tabindex="0" onclick="this.blur();">on</div>
           </div>
         </div>
-        <div class="section fontSize">
-          <h1>font size</h1>
-          <div class="text">Change the font size of the test words.</div>
-          <div class="buttons">
-            <div class="button" fontsize="1" tabindex="0" onclick="this.blur();">1</div>
-            <div class="button" fontsize="125" tabindex="0" onclick="this.blur();">1.25</div>
-            <div class="button" fontsize="15" tabindex="0" onclick="this.blur();">1.5</div>
-            <div class="button" fontsize="2" tabindex="0" onclick="this.blur();">2</div>
-          </div>
-        </div>
         <div class="section randomTheme">
           <h1>randomise theme</h1>
           <div class="text">