font toggle

about.html

@@ -37,12 +37,19 @@
         <a href="https://host.saturn.gay/">HOSTING</a>
     </div>
     <div class="rbottom">
+        <div class="switches">
+        <div class="font-switch">
+            <span id="fontToggleText">SERIF</span>
+        </div>
+        <p>|</p>
         <div class="theme-switch">
             <span id="themeToggleText">DARK</span>
         </div>
+        </div>
         <p>© 2022 - 2025 SATURN</p>
         <p>ALL RIGHTS RESERVED</p>
     </div>
     <script src="assets/js/darkmode.js"></script>
+    <script src="assets/js/font.js"></script>
 </body>
 </html>

assets/css/styles.css

@@ -10,7 +10,7 @@
 
 @font-face {
     font-family: "RoboMono";
-    src: url(assets/font/robotomono.woff2) format('woff2');
+    src: url(../font/RobotoMono-Light.ttf);
 }
 
 :root {
@@ -19,11 +19,26 @@
 }
 
 * {
-    font-family: "DIN-light", sans-serif;
     background-color: var(--bg-color);
     color: var(--text-color);
 }
 
+body {
+    font-family: "DIN-light", sans-serif;
+}
+
+.mono-font {
+    font-family: "RoboMono", monospace !important;
+}
+
+#fontToggleText.mono-text {
+    font-family: "RoboMono", monospace !important;
+}
+
+#fontToggleText.serif-text {
+    font-family: "DIN-light", sans-serif !important;
+}
+
 .ascii-art {
     font-family: "RoboMono", monospace;
     white-space: pre; 
@@ -103,7 +118,6 @@ body {
 
 .navbar a {
     position: relative; 
-    font-family: "DIN-light", sans-serif;
     font-size: 23px;
     text-decoration: none; 
     color: var(--text-color);
@@ -181,9 +195,17 @@ body {
 
 .theme-switch {
     cursor: pointer;
-    text-decoration: wavy;
+}
+
+.font-switch {
+    cursor: pointer;
 }
 
 body.dark-mode .theme-switch {
     color: var(--text-color);
 }
+
+.switches {
+    display: flex;
+    gap: 15px;
+}

assets/js/font.js

@@ -0,0 +1,34 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const toggleText = document.getElementById('fontToggleText');
+    const body = document.body;
+
+    const savedFont = localStorage.getItem('font');
+
+    if (savedFont === 'mono') {
+        body.classList.add('mono-font');
+        toggleText.textContent = 'SERIF';
+        toggleText.classList.remove('serif-text');
+        toggleText.classList.add('mono-text');
+    } else {
+        body.classList.remove('mono-font');
+        toggleText.textContent = 'MONO';
+        toggleText.classList.remove('mono-text');
+        toggleText.classList.add('serif-text');
+    }
+
+    toggleText.addEventListener('click', () => {
+        body.classList.toggle('mono-font');
+
+        if (body.classList.contains('mono-font')) {
+            toggleText.textContent = 'SERIF';
+            toggleText.classList.remove('serif-text');
+            toggleText.classList.add('mono-text');
+            localStorage.setItem('font', 'mono');
+        } else {
+            toggleText.textContent = 'MONO';
+            toggleText.classList.remove('mono-text');
+            toggleText.classList.add('serif-text');
+            localStorage.setItem('font', 'serif');
+        }
+    });
+});

index.html

@@ -43,12 +43,19 @@
     </div>
 
     <div class="rbottom">
+        <div class="switches">
+        <div class="font-switch">
+            <span id="fontToggleText">SERIF</span>
+        </div>
+        <p>|</p>
         <div class="theme-switch">
             <span id="themeToggleText">DARK</span>
         </div>
+        </div>
         <p>© 2022 - 2025 SATURN</p>
         <p>ALL RIGHTS RESERVED</p>
     </div>
     <script src="assets/js/darkmode.js"></script>
+    <script src="assets/js/font.js"></script>
 </body>
 </html>

projects.html

@@ -23,13 +23,20 @@
         <a href="projects.html">PROJECTS</a>
         <a href="https://host.saturn.gay/">HOSTING</a>
     </div>
-    <div class="rbottom">
+   <div class="rbottom">
+        <div class="switches">
+        <div class="font-switch">
+            <span id="fontToggleText">SERIF</span>
+        </div>
+        <p>|</p>
         <div class="theme-switch">
             <span id="themeToggleText">DARK</span>
         </div>
+        </div>
         <p>© 2022 - 2025 SATURN</p>
         <p>ALL RIGHTS RESERVED</p>
     </div>
     <script src="assets/js/darkmode.js"></script>
+    <script src="assets/js/font.js"></script>
 </body>
 </html>