From c6aa030e5435296fd309ff635bfaa4855ec973f7 Mon Sep 17 00:00:00 2001
From: Brendan Chen <me@bchen.dev>
Date: Sun, 3 May 2026 15:20:22 -0700
Subject: [PATCH] refactor(style): drop custom webfont, use system fonts

Removes the IBM Plex Mono Google Fonts @import, replaces the --font CSS
variable with a cross-platform system sans-serif stack, and adds a
--font-mono variable for the share-URL readonly input so copy/share text
stays monospace. Also adds line-height: 1.5 to body to compensate for
the system fonts' tighter default leading.

No font asset files exist in /public; layout.ts has no font <link> tags
to remove. Acceptance check: build + 112 tests pass; new
tests/integration/style.test.ts asserts no @import / IBM Plex / external
font URL remains and that the system stack is wired up.
---
 public/style.css                |  7 +++---
 tests/integration/style.test.ts | 43 +++++++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 tests/integration/style.test.ts

diff --git a/public/style.css b/public/style.css
index 7ce63c9..a5920d9 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap');
-
 /* ── Reset ──────────────────────────────────────────────── */
 *, *::before, *::after {
   box-sizing: border-box;
@@ -18,7 +16,8 @@
   --gray-600:#555;
   --red:     #c00;
 
-  --font: 'IBM Plex Mono', 'Courier New', monospace;
+  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   --border: 1px solid var(--black);
   --radius: 0;
 }
@@ -28,6 +27,7 @@ html { font-size: 14px; }
 
 body {
   font-family: var(--font);
+  line-height: 1.5;
   background: var(--white);
   color: var(--black);
   min-height: 100vh;
@@ -265,6 +265,7 @@ a.btn:hover {
 
 .share-box input[readonly] {
   flex: 1;
+  font-family: var(--font-mono);
   background: var(--gray-100);
   color: var(--gray-600);
   border-right: none;
diff --git a/tests/integration/style.test.ts b/tests/integration/style.test.ts
new file mode 100644
index 0000000..9dd6bf1
--- /dev/null
+++ b/tests/integration/style.test.ts
@@ -0,0 +1,43 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { readFileSync } from 'fs';
+import { join } from 'path';
+import { createTestApp, type TestContext } from '../helpers/setup.ts';
+
+const STYLE_PATH = join(process.cwd(), 'public', 'style.css');
+
+describe('public/style.css (file contents)', () => {
+  const css = readFileSync(STYLE_PATH, 'utf8');
+
+  it('does not @import any external font CSS', () => {
+    expect(css).not.toContain('googleapis.com');
+    expect(css).not.toContain('@import');
+  });
+
+  it('does not reference the previous IBM Plex Mono webfont', () => {
+    expect(css).not.toContain('IBM Plex');
+  });
+
+  it('uses the system sans-serif stack as its default font', () => {
+    expect(css).toContain('-apple-system');
+  });
+
+  it('keeps a monospace stack available via --font-mono for code-like UI', () => {
+    expect(css).toContain('--font-mono');
+    expect(css).toMatch(/\.share-box input\[readonly\][\s\S]*?font-family:\s*var\(--font-mono\)/);
+  });
+});
+
+describe('GET /public/style.css', () => {
+  let ctx: TestContext;
+
+  beforeEach(() => { ctx = createTestApp(); });
+  afterEach(async () => { await ctx.app.close(); ctx.cleanup(); });
+
+  it('serves the stylesheet as text/css with no external font import', async () => {
+    const res = await ctx.app.inject({ method: 'GET', url: '/public/style.css' });
+    expect(res.statusCode).toBe(200);
+    expect(res.headers['content-type']).toMatch(/text\/css/);
+    expect(res.body).not.toContain('googleapis.com');
+    expect(res.body).toContain('-apple-system');
+  });
+});