From 859c345b487195a439bf742d9550709de8142f84 Mon Sep 17 00:00:00 2001
From: semanticdata <contact@miguelpimentel.do>
Date: Thu, 15 Jan 2026 08:18:41 -0600
Subject: [PATCH] new font-family dropdown menu

---
 packages/newtab/newtab.html |  8 ++++++++
 packages/sidebar/panel.html |  8 ++++++++
 shared/script.js            | 17 +++++++++++++++++
 shared/styles.css           | 17 +++++++++++++++++
 4 files changed, 50 insertions(+)

diff --git a/packages/newtab/newtab.html b/packages/newtab/newtab.html
index 9bb8f07..8b54b91 100644
--- a/packages/newtab/newtab.html
+++ b/packages/newtab/newtab.html
@@ -61,6 +61,14 @@
                     <span id="font-display">18px</span>
                 </div>
                 <input type="range" id="font-slider" min="12" max="32" value="18" step="1">
+                
+                <div class="setting-row">
+                    <label for="font-family">Font Family</label>
+                </div>
+                <select id="font-family">
+                    <option value="serif">Serif</option>
+                    <option value="sans-serif">Sans-serif</option>
+                </select>
             </div>
 
             <!-- Settings Trigger -->
diff --git a/packages/sidebar/panel.html b/packages/sidebar/panel.html
index 2e948de..38cfa81 100644
--- a/packages/sidebar/panel.html
+++ b/packages/sidebar/panel.html
@@ -61,6 +61,14 @@
                     <span id="font-display">18px</span>
                 </div>
                 <input type="range" id="font-slider" min="12" max="32" value="18" step="1">
+                
+                <div class="setting-row">
+                    <label for="font-family">Font Family</label>
+                </div>
+                <select id="font-family">
+                    <option value="serif">Serif</option>
+                    <option value="sans-serif">Sans-serif</option>
+                </select>
             </div>
 
             <!-- Settings Trigger -->
diff --git a/shared/script.js b/shared/script.js
index 818ea18..abd2d34 100644
--- a/shared/script.js
+++ b/shared/script.js
@@ -6,6 +6,7 @@ const els = {
   menu: document.getElementById("settings-menu"),
   slider: document.getElementById("font-slider"),
   fontDisplay: document.getElementById("font-display"),
+  fontFamily: document.getElementById("font-family"),
   words: document.getElementById("word-count"),
   status: document.getElementById("save-status"),
 };
@@ -110,6 +111,11 @@ const updateFontSize = (val) => {
   localStore.set("fontsize", size);
 };
 
+const updateFontFamily = (val) => {
+  els.html.style.setProperty("--font-body", val);
+  localStore.set("fontfamily", val);
+};
+
 // Menu Listeners
 els.toggleSettings.addEventListener("click", toggleMenu);
 
@@ -117,6 +123,10 @@ els.slider.addEventListener("input", (e) => {
   updateFontSize(e.target.value);
 });
 
+els.fontFamily.addEventListener("change", (e) => {
+  updateFontFamily(e.target.value);
+});
+
 // Close menu when clicking outside
 document.addEventListener("click", (e) => {
   if (
@@ -235,6 +245,13 @@ if (storedFontSize) {
   updateFontSize(val);
 }
 
+// Init Font Family
+const storedFontFamily = localStore.get("fontfamily");
+if (storedFontFamily) {
+  els.fontFamily.value = storedFontFamily;
+  updateFontFamily(storedFontFamily);
+}
+
 els.note.addEventListener("input", (e) => {
   updateStats(e.target.value);
   save(e.target.value);
diff --git a/shared/styles.css b/shared/styles.css
index 7adf9b6..564ecf5 100644
--- a/shared/styles.css
+++ b/shared/styles.css
@@ -190,3 +190,20 @@ textarea:focus {
   cursor: pointer;
   accent-color: var(--fg);
 }
+
+#font-family {
+  width: 100%;
+  padding: 0.25rem 0.5rem;
+  background: var(--bg);
+  color: var(--fg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: var(--font-ui);
+  font-size: 0.85rem;
+}
+
+#font-family:focus {
+  outline: none;
+  border-color: var(--subtle);
+}