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;

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');
+  });
+});