From af73afe40123663032f90deeb4c8b7f1c21291d8 Mon Sep 17 00:00:00 2001
From: Stephen Adamson <popertots@gmail.com>
Date: Mon, 15 Jun 2026 21:27:34 +0100
Subject: [PATCH] feat(frontend): add Playfair Display heading font to layout
 and pages

Load Playfair Display from Google Fonts via preconnect and stylesheet in root layout, then apply to h1 headings on BookingFlow, Account, and Contact pages for a consistent brand typography.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 frontend/src/lib/components/booking/BookingFlow.svelte | 2 +-
 frontend/src/routes/+layout.svelte                     | 6 ++++++
 frontend/src/routes/account/+page.svelte               | 2 +-
 frontend/src/routes/contact/+page.svelte               | 2 +-
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/booking/BookingFlow.svelte b/frontend/src/lib/components/booking/BookingFlow.svelte
index ffb4723..9ca8a68 100644
--- a/frontend/src/lib/components/booking/BookingFlow.svelte
+++ b/frontend/src/lib/components/booking/BookingFlow.svelte
@@ -1422,7 +1422,7 @@
 
 <div class="mx-auto max-w-4xl p-6">
 	<div class="mb-8 text-center">
-		<h1 class="mb-2 text-3xl font-bold">Book Your Appointment</h1>
+		<h1 class="mb-2 font-['Playfair_Display'] text-4xl font-bold">Book Your Appointment</h1>
 		<p class="text-gray-600">Professional beauty treatments in a calm and friendly environment</p>
 	</div>
 
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index a4f0511..78d6e1f 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -47,6 +47,12 @@
 
 <svelte:head>
 	<link rel="icon" href={favicon} />
+	<link rel="preconnect" href="https://fonts.googleapis.com" />
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+	<link
+		href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap"
+		rel="stylesheet"
+	/>
 </svelte:head>
 
 <NavBar />
diff --git a/frontend/src/routes/account/+page.svelte b/frontend/src/routes/account/+page.svelte
index ab834f7..5ff5054 100644
--- a/frontend/src/routes/account/+page.svelte
+++ b/frontend/src/routes/account/+page.svelte
@@ -1141,7 +1141,7 @@
 	<div class="mx-auto max-w-4xl space-y-6 p-4 pb-32">
 		<!-- Header -->
 		<div class="mb-8 text-center">
-			<h1 class="text-3xl font-bold">My Account</h1>
+			<h1 class="font-['Playfair_Display'] text-4xl font-bold">My Account</h1>
 			<p class="text-gray-600">Manage your profile, bookings, and settings</p>
 		</div>
 
diff --git a/frontend/src/routes/contact/+page.svelte b/frontend/src/routes/contact/+page.svelte
index dccd477..0a6081d 100644
--- a/frontend/src/routes/contact/+page.svelte
+++ b/frontend/src/routes/contact/+page.svelte
@@ -32,7 +32,7 @@
 </script>
 
 <section class="py-12">
-	<h1 class="mb-8 text-center text-2xl font-semibold">Contact Me</h1>
+	<h1 class="mb-8 text-center font-['Playfair_Display'] text-4xl font-bold">Contact Me</h1>
 	<div class="mx-auto grid max-w-[744px] gap-6 px-4 lg:grid-cols-2">
 		<div class="h-[376px]">
 			{#if loading}