diff --git a/html/end.html b/html/end.html
index 3c3e9b8..7b9e190 100644
--- a/html/end.html
+++ b/html/end.html
@@ -1,4 +1,5 @@
     </main>
+    <script src="main.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/html/start.html b/html/start.html
index e7cfc41..6b50dc0 100644
--- a/html/start.html
+++ b/html/start.html
@@ -6,7 +6,33 @@
     <title>avg convo</title>
     <link href="text_analysis.css" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style id="style-heonian" disabled>
+        .convo-heonian {
+            display: block;
+        }
+
+        .convo-roman {
+            display: none;
+        }
+    </style>
+    <style id="style-roman">
+        .convo-heonian {
+            display: none;
+        }
+
+        .convo-roman {
+            display: block;
+        }
+    </style>
 </head>
 
 <body>
+    <noscript>
+        <style>
+            #font-button {
+                display: none;
+            }
+        </style>
+    </noscript>
+    <p class="button" id="font-button">toggle font</p>
     <main>
\ No newline at end of file
diff --git a/main.js b/main.js
index 4d38611..ce10409 100644
--- a/main.js
+++ b/main.js
@@ -5,13 +5,17 @@
 
 let words = {}
 
+let currentFont = "r";
+
 function init() {
-    createWordList();
-    injectWords();
-    document.querySelector("#popup-container").addEventListener("click", () => {
-        document.querySelector("#popup-container").style.opacity = 0;
-        document.querySelector("#popup-container").style.pointerEvents = "none";
-    })
+    // createWordList();
+    // injectWords();
+    // document.querySelector("#popup-container").addEventListener("click", () => {
+        // document.querySelector("#popup-container").style.opacity = 0;
+        // document.querySelector("#popup-container").style.pointerEvents = "none";
+    // })
+    // above are commented out until wordlist is added~
+    document.querySelector("#font-button").addEventListener("click", () => {fontButton();});
 }
 
 function showPopup(word) {
@@ -68,6 +72,18 @@ function injectWords() {
     });
 }
 
+function fontButton() {
+    if (currentFont == "r") {
+        document.querySelector("#style-heonian").disabled = false;
+        document.querySelector("#style-roman").disabled = true;
+        currentFont = "h";
+    } else {
+        document.querySelector("#style-heonian").disabled = true;
+        document.querySelector("#style-roman").disabled = false;
+        currentFont = "r";
+    }
+}
+
 window.onload = () => {
     init();
 }
\ No newline at end of file
diff --git a/test.html b/test.html
index ccb47e5..5396c23 100644
--- a/test.html
+++ b/test.html
@@ -6,9 +6,35 @@
     <title>avg convo</title>
     <link href="text_analysis.css" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style id="style-heonian" disabled>
+        .convo-heonian {
+            display: block;
+        }
+
+        .convo-roman {
+            display: none;
+        }
+    </style>
+    <style id="style-roman">
+        .convo-heonian {
+            display: none;
+        }
+
+        .convo-roman {
+            display: block;
+        }
+    </style>
 </head>
 
 <body>
+    <noscript>
+        <style>
+            #font-button {
+                display: none;
+            }
+        </style>
+    </noscript>
+    <p class="button" id="font-button">toggle font</p>
     <main>
         <div class="convo-container">
             <div class="convo">
@@ -378,6 +404,7 @@ relfur chu arilaen dedaka'nya.
             </div>
         </div>
     </main>
+    <script src="main.js"></script>
 </body>
 
 </html>
diff --git a/text_analysis.css b/text_analysis.css
index 87c0e89..e933a0e 100644
--- a/text_analysis.css
+++ b/text_analysis.css
@@ -162,4 +162,12 @@ main {
 
 data-swap {
     display: none;
+}
+
+.button {
+    text-decoration: underline;
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
 }
\ No newline at end of file
