diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx
index 0d77b0b..ad1c21e 100644
--- a/app/components/settings/Settings.tsx
+++ b/app/components/settings/Settings.tsx
@@ -516,6 +516,19 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                   setValue={setBasicTextColor}
                   cssVariable=""
                 />
+                <FontSizeSetting
+                  fontSize={fontSize}
+                  setFontSize={setFontSize}
+                />
+                <DropdownSetting
+                  label="Font Family"
+                  value={fontFamily}
+                  setValue={(newFont) => {
+                    setFontFamily(newFont);
+                    document.documentElement.style.setProperty('--font-family', newFont);
+                  }}
+                  options={fontOptions}
+                />
               </>
             )}
 
diff --git a/app/components/settings/theme.ts b/app/components/settings/theme.ts
index 2cef5cc..75c1c40 100644
--- a/app/components/settings/theme.ts
+++ b/app/components/settings/theme.ts
@@ -247,8 +247,8 @@ export const applyBasicCustomTheme = (
   document.documentElement.style.setProperty('--popup-background-color', accentColor);
   document.documentElement.style.setProperty('--pop-up-text', lightenColor(textColor, 80));
   document.documentElement.style.setProperty('--input-border-color', primaryColor);
-  document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'");
-  document.documentElement.style.setProperty('--font-size', '16px');
+  document.documentElement.style.setProperty('--font-family', localStorage.getItem("fontFamily") || "'Poppins', 'sans-serif'");
+  document.documentElement.style.setProperty('--font-size', localStorage.getItem("fontSize") || '16px');
 };
 
 // Helper function to darken a color (returns a darker version of the provided color)