Merge pull request #4 from Ditectrev/feature/ditectrev-fonts

danieldanielecki · web-flow · commit df4743c1ad31 · 2025-11-24T09:25:02.000+01:00
Feature/ditectrev fonts
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,7 +2,7 @@ import 'css/tailwind.css'
 import 'pliny/search/algolia.css'
 import 'remark-github-blockquote-alert/alert.css'
 
-import { Space_Grotesk } from 'next/font/google'
+import { Philosopher, Lora } from 'next/font/google'
 import { Analytics, AnalyticsConfig } from 'pliny/analytics'
 import { SearchProvider, SearchConfig } from 'pliny/search'
 import Header from '@/components/Header'
@@ -12,10 +12,17 @@ import siteMetadata from '@/data/siteMetadata'
 import { ThemeProviders } from './theme-providers'
 import { Metadata } from 'next'
 
-const space_grotesk = Space_Grotesk({
+const philosopher = Philosopher({
   subsets: ['latin'],
   display: 'swap',
-  variable: '--font-space-grotesk',
+  weight: ['400', '700'],
+  variable: '--font-philosopher',
+})
+
+const lora = Lora({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-lora',
 })
 
 export const metadata: Metadata = {
@@ -64,7 +71,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html
       lang={siteMetadata.language}
-      className={`${space_grotesk.variable} scroll-smooth`}
+      className={`${philosopher.variable} ${lora.variable} scroll-smooth`}
       suppressHydrationWarning
     >
       <link
diff --git a/css/tailwind.css b/css/tailwind.css
@@ -7,9 +7,9 @@
 /* Core theme configuration */
 @theme {
   /* Font families */
-  --font-sans:
-    var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-sans: var(--font-lora), ui-serif, Georgia, serif;
+
+  --font-heading: var(--font-philosopher), ui-sans-serif, system-ui, sans-serif;
 
   /* Colors */
   /* Brand color #3f51b5 converted to OKLCH and scaled for accessibility */
@@ -77,6 +77,20 @@
     border-radius: var(--radius-sm);
     outline-color: var(--color-primary-500);
   }
+
+  /* Apply Philosopher font to headings and buttons */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-heading);
+  }
+
+  button {
+    font-family: var(--font-heading);
+  }
 }
 
 @layer utilities {
