From 665f67143f1092bf0c94c3e535b9a4793fbe91d2 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Thu, 5 Feb 2026 14:29:08 +0700
Subject: [PATCH] chore(website): remove Playfair font and add font-title
 utility class

---
 packages/website/src/routes/__root.tsx              | 6 ------
 packages/website/src/routes/docs/best-practices.tsx | 2 +-
 packages/website/src/routes/docs/configuration.tsx  | 2 +-
 packages/website/src/routes/docs/index.tsx          | 2 +-
 packages/website/src/routes/docs/security.tsx       | 2 +-
 packages/website/src/styles.css                     | 7 +++++--
 6 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/website/src/routes/__root.tsx b/packages/website/src/routes/__root.tsx
index 84158a814..63e5bd49b 100644
--- a/packages/website/src/routes/__root.tsx
+++ b/packages/website/src/routes/__root.tsx
@@ -17,12 +17,6 @@ export const Route = createRootRoute({
       { rel: 'icon', href: '/favicon.ico', sizes: '48x48' },
       { rel: 'icon', href: '/favicon.svg', type: 'image/svg+xml' },
       { rel: 'apple-touch-icon', href: '/favicon.svg' },
-      { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
-      { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossOrigin: 'anonymous' },
-      {
-        rel: 'stylesheet',
-        href: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&display=swap',
-      },
     ],
   }),
   component: RootComponent,
diff --git a/packages/website/src/routes/docs/best-practices.tsx b/packages/website/src/routes/docs/best-practices.tsx
index ea9a330d1..2f9c80a8e 100644
--- a/packages/website/src/routes/docs/best-practices.tsx
+++ b/packages/website/src/routes/docs/best-practices.tsx
@@ -17,7 +17,7 @@ function BestPractices() {
   return (
     <div className="space-y-8">
       <div>
-        <h1 className="text-3xl font-medium font-serif mb-4">Best Practices</h1>
+        <h1 className="text-3xl font-medium font-title mb-4">Best Practices</h1>
         <p className="text-white/60 leading-relaxed">
           What I've learned from using Paseo daily. Not rules, just patterns
           that have worked for me.
diff --git a/packages/website/src/routes/docs/configuration.tsx b/packages/website/src/routes/docs/configuration.tsx
index 5841f851a..7a863169c 100644
--- a/packages/website/src/routes/docs/configuration.tsx
+++ b/packages/website/src/routes/docs/configuration.tsx
@@ -17,7 +17,7 @@ function Configuration() {
   return (
     <div className="space-y-8">
       <div>
-        <h1 className="text-3xl font-medium font-serif mb-4">Configuration</h1>
+        <h1 className="text-3xl font-medium font-title mb-4">Configuration</h1>
         <p className="text-white/60 leading-relaxed">
           Paseo loads configuration from a single JSON file in your Paseo home directory, with optional
           environment variable and CLI overrides.
diff --git a/packages/website/src/routes/docs/index.tsx b/packages/website/src/routes/docs/index.tsx
index 56d3e40a9..dbda10726 100644
--- a/packages/website/src/routes/docs/index.tsx
+++ b/packages/website/src/routes/docs/index.tsx
@@ -17,7 +17,7 @@ function GettingStarted() {
   return (
     <div className="space-y-8">
       <div>
-        <h1 className="text-3xl font-medium font-serif mb-4">Getting Started</h1>
+        <h1 className="text-3xl font-medium font-title mb-4">Getting Started</h1>
         <p className="text-white/60 leading-relaxed">
           Paseo connects to your local development environment and lets you manage your coding agents from anywhere.
         </p>
diff --git a/packages/website/src/routes/docs/security.tsx b/packages/website/src/routes/docs/security.tsx
index 31b372b2e..7247f97e9 100644
--- a/packages/website/src/routes/docs/security.tsx
+++ b/packages/website/src/routes/docs/security.tsx
@@ -26,7 +26,7 @@ function Security() {
   return (
     <div className="space-y-10">
       <div>
-        <h1 className="text-3xl font-medium font-serif mb-4">Security</h1>
+        <h1 className="text-3xl font-medium font-title mb-4">Security</h1>
         <p className="text-white/60 leading-relaxed">
           Paseo follows a client-server architecture, similar to Docker. The daemon runs on your
           machine and manages your coding agents. Clients (the mobile app, CLI, or web interface)
diff --git a/packages/website/src/styles.css b/packages/website/src/styles.css
index 42d8e0597..749aa9306 100644
--- a/packages/website/src/styles.css
+++ b/packages/website/src/styles.css
@@ -1,5 +1,10 @@
 @import 'tailwindcss';
 
+/* Title font - centralized for easy changes */
+.font-title {
+  font-family: inherit;
+}
+
 /* Inline code styling - applies to code elements not inside pre blocks */
 :not(pre) > code {
   background-color: var(--color-muted);
@@ -9,8 +14,6 @@
 }
 
 @theme {
-  --font-serif: 'Playfair Display', serif;
-
   --color-background: #0a0a0a;
   --color-foreground: #fafafa;
   --color-muted: #262626;