2 files changed, 35 insertions, 0 deletions
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 6396633..c60ddb6 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -24,21 +24,25 @@ h5,
 .font-default {
   --font-body: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif;
   --font-heading: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: var(--font-body);
 }
 
 .font-serif {
   --font-body: Georgia, 'Times New Roman', Times, serif;
   --font-heading: Georgia, 'Times New Roman', Times, serif;
+  font-family: var(--font-body);
 }
 
 .font-sans {
   --font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   --font-heading: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family: var(--font-body);
 }
 
 .font-mono {
   --font-body: Menlo, Monaco, Consolas, 'Courier New', monospace;
   --font-heading: Menlo, Monaco, Consolas, 'Courier New', monospace;
+  font-family: var(--font-body);
 }
 
 :root {
diff --git a/frontend/tests/font.spec.ts b/frontend/tests/font.spec.ts
new file mode 100644
index 0000000..0723f38
--- /dev/null
+++ b/frontend/tests/font.spec.ts
@@ -0,0 +1,31 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Font Theme Settings', () => {
+    test('should change font family when theme starts', async ({ page }) => {
+        // 1. Login
+        await page.goto('/v2/login');
+        await page.click('button[type="submit"]');
+        await expect(page).toHaveURL(/.*\/v2\/?$/);
+
+        // 2. Go to Settings
+        await page.click('text=Settings');
+        await expect(page).toHaveURL(/.*\/v2\/settings/);
+
+        // 3. Verify Default Font (Palatino)
+        // We check the computed style of the dashboard container or a body element
+        const dashboard = page.locator('.dashboard');
+        await expect(dashboard).toHaveCSS('font-family', /Palatino/);
+
+        // 4. Change to Sans-Serif
+        await page.selectOption('select.font-select', 'sans');
+
+        // 5. Verify Sans Font (Inter)
+        await expect(dashboard).toHaveCSS('font-family', /Inter/);
+
+        // 6. Change to Monospace
+        await page.selectOption('select.font-select', 'mono');
+
+        // 7. Verify Mono Font (Menlo or Monaco or Courier)
+        await expect(dashboard).toHaveCSS('font-family', /Menlo|Monaco|Courier/);
+    });
+});