chore: change font to Lora & Philosopher

danieldanielecki · danieldanielecki · commit d241b390a79d · 2025-11-26T10:20:02.000+01:00
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,6 @@
 import { type ReactNode } from "react";
 import { type Metadata, type Viewport } from "next";
+import { Philosopher, Lora } from "next/font/google";
 import Header from "@azure-fundamentals/components/Header";
 import Footer from "@azure-fundamentals/components/Footer";
 import ApolloProvider from "@azure-fundamentals/components/ApolloProvider";
@@ -9,6 +10,20 @@ import { ThemeProvider } from "@azure-fundamentals/contexts/ThemeContext";
 import { TrialWarning } from "@azure-fundamentals/components/TrialWarning";
 import "styles/globals.css";
 
+const philosopher = Philosopher({
+  weight: ["400"],
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-philosopher",
+});
+
+const lora = Lora({
+  weight: ["400"],
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-lora",
+});
+
 export const viewport: Viewport = {
   themeColor: "#3f51b5",
   width: "device-width",
@@ -107,7 +122,9 @@ type RootLayoutProps = {
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html lang="en" className="dark">
-      <body className="bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors duration-200">
+      <body
+        className={`${lora.className} ${philosopher.variable} bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors duration-200`}
+      >
         <ThemeProvider>
           <ApolloProvider>
             <AuthProvider>
diff --git a/styles/globals.css b/styles/globals.css
@@ -628,3 +628,12 @@ input[type="text"]:focus {
   box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.2) !important;
 }
 
+/* Apply Philosopher font to headings and buttons */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-philosopher), serif;
+}
+
+button, .btn-primary {
+  font-family: var(--font-philosopher), serif;
+}
+
