From 76d747a55783af3832b1dc1bd4f9eeb7e75f9b33 Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Sat, 23 Aug 2025 17:03:58 -0600 Subject: [PATCH] Update tailwind fonts --- app/layout.js | 9 ++++++--- app/tailwind.css | 10 +++++++++- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/app/layout.js b/app/layout.js index 34589a7..d4d41bc 100644 --- a/app/layout.js +++ b/app/layout.js @@ -5,25 +5,28 @@ import Footer from "./components/Footer"; const inter = Inter({ subsets: ["latin"], - weight: ["400", "500"], + weight: ["400", "500", "600", "700"], variable: "--font-inter", + display: "swap", }); const bricolageGrotesque = Bricolage_Grotesque({ subsets: ["latin"], - weight: ["400", "500", "700"], + weight: ["400", "500", "700", "800"], variable: "--font-bricolage-grotesque", + display: "swap", }); const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], weight: ["400", "500", "700"], variable: "--font-space-grotesk", + display: "swap", }); export default function RootLayout({ children }) { return ( - + diff --git a/app/tailwind.css b/app/tailwind.css index df97465..90f379a 100644 --- a/app/tailwind.css +++ b/app/tailwind.css @@ -4,6 +4,7 @@ @source "../stories/**/*"; @source "../app/**/*"; @source "../.storybook/**/*"; +@source "./**/*"; @theme inline { /* Custom breakpoints */ @@ -16,6 +17,14 @@ /* Reset Tailwind color defaults to avoid collisions */ --color-*: initial; + /* Font families */ + --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, + "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + --font-display: var(--font-bricolage-grotesque), ui-sans-serif, system-ui, + -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + --font-mono: var(--font-space-grotesk), ui-monospace, SFMono-Regular, + "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; + /* Dimension */ --spacing-scale-000: 0px; --spacing-scale-001: 1px; @@ -409,7 +418,6 @@ --shadow-subtle: 0px 0px 48px 0px oklch(0% 0 0 / 10%); --shadow-minimal-shadow: 0px 0px 8px 0px oklch(0% 0 0 / 15%); --shadow-focus-inverse: 0px 0px 10px 1px oklch(23.93% 0 263.28); - --shadow-subtle: 0px 0px 48px 0px oklch(0% 0 0 / 10%); /* Use this shadow most of the time */ --shadow-shallow-below: 0px 4px 16px 0px oklch(0% 0 0 / 12%); --shadow-default: 0px 4px 6px 0px oklch(0% 0 0 / 9%);