From 49434d851ede4dccdda98a7616c6eaf558e5251f Mon Sep 17 00:00:00 2001
From: "Thomas G. Lopes" <26071571+TGlide@users.noreply.github.com>
Date: Mon, 16 Jun 2025 12:55:45 +0100
Subject: [PATCH] font families

---
 package.json                   |  3 +++
 pnpm-lock.yaml                 | 24 ++++++++++++++++++++++++
 src/app.css                    | 12 ++++++++----
 src/routes/chat/+layout.svelte |  2 +-
 4 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 12b1975..ec3043b 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,9 @@
 	},
 	"dependencies": {
 		"@floating-ui/dom": "^1.7.1",
+		"@fontsource-variable/fraunces": "^5.2.7",
+		"@fontsource-variable/geist-mono": "^5.2.6",
+		"@fontsource-variable/inter": "^5.2.6",
 		"better-auth": "^1.2.9"
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 34f5499..e5a8396 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,15 @@ importers:
       '@floating-ui/dom':
         specifier: ^1.7.1
         version: 1.7.1
+      '@fontsource-variable/fraunces':
+        specifier: ^5.2.7
+        version: 5.2.7
+      '@fontsource-variable/geist-mono':
+        specifier: ^5.2.6
+        version: 5.2.6
+      '@fontsource-variable/inter':
+        specifier: ^5.2.6
+        version: 5.2.6
       better-auth:
         specifier: ^1.2.9
         version: 1.2.9
@@ -564,6 +573,15 @@ packages:
   '@floating-ui/utils@0.2.9':
     resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
 
+  '@fontsource-variable/fraunces@5.2.7':
+    resolution: {integrity: sha512-PYIcwL3+0SA2IEAcA9ma07Rz8DCbJdLy7Hb1syq/FIcCyf1zSlHRRcC0a33PnBCZ9Q7B+01kFH0cS29yqWEk3w==}
+
+  '@fontsource-variable/geist-mono@5.2.6':
+    resolution: {integrity: sha512-vw6T9JGTrYJ980bn7W8iTPhe2jVK5ifunVs7xh9dfTVArjDSkJs03JjeZrH5LKEpGABLXSlSlNU57HRm4tmFMg==}
+
+  '@fontsource-variable/inter@5.2.6':
+    resolution: {integrity: sha512-jks/bficUPQ9nn7GvXvHtlQIPudW7Wx8CrlZoY8bhxgeobNxlQan8DclUJuYF2loYRrGpfrhCIZZspXYysiVGg==}
+
   '@hexagon/base64@1.1.28':
     resolution: {integrity: sha512-lhqDEAvWixy3bZ+UOYbPwUbBkwBq5C1LAJ/xPC8Oi+lL54oyakv/npbA0aU2hgCsx/1NUd4IBvV03+aUBWxerw==}
 
@@ -2754,6 +2772,12 @@ snapshots:
 
   '@floating-ui/utils@0.2.9': {}
 
+  '@fontsource-variable/fraunces@5.2.7': {}
+
+  '@fontsource-variable/geist-mono@5.2.6': {}
+
+  '@fontsource-variable/inter@5.2.6': {}
+
   '@hexagon/base64@1.1.28': {}
 
   '@humanfs/core@0.19.1': {}
diff --git a/src/app.css b/src/app.css
index f7ce0eb..a786c97 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,4 +1,7 @@
 @import 'tailwindcss';
+@import '@fontsource-variable/inter';
+@import '@fontsource-variable/geist-mono';
+@import '@fontsource-variable/fraunces';
 
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -125,12 +128,13 @@
 	--color-sidebar-ring: var(--sidebar-ring);
 
 	--font-sans:
-		ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-		'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+		'Inter Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+		Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
 		'Segoe UI Symbol', 'Noto Color Emoji';
+	--font-serif: 'Fraunces Variable', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
 	--font-mono:
-		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
-		monospace;
+		'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+		'Courier New', monospace;
 
 	--radius-sm: calc(var(--radius) - 4px);
 	--radius-md: calc(var(--radius) - 2px);
diff --git a/src/routes/chat/+layout.svelte b/src/routes/chat/+layout.svelte
index 55ec9f3..fd13c64 100644
--- a/src/routes/chat/+layout.svelte
+++ b/src/routes/chat/+layout.svelte
@@ -16,7 +16,7 @@
 <Sidebar.Root>
 	<Sidebar.Sidebar class="flex flex-col p-2">
 		<div class="flex place-items-center justify-center py-2">
-			<span class="text-center text-lg font-semibold">Thom.chat</span>
+			<span class="text-center font-serif text-lg">Thom.chat</span>
 		</div>
 		<Button href="/chat" class="w-full">New Chat</Button>
 		<div class="flex flex-1 flex-col overflow-y-auto">