diff --git a/app/globals.css b/app/globals.css index f10d5fe..2c6d81f 100644 --- a/app/globals.css +++ b/app/globals.css @@ -108,8 +108,8 @@ body { color: var(--kx-on-variant); } .kx-display { - font-family: 'Space Grotesk', 'CookieRun', system-ui, sans-serif; - letter-spacing: -0.02em; + font-family: var(--font-kx-hero), 'Bagel Fat One', 'Space Grotesk', 'CookieRun', system-ui, sans-serif; + letter-spacing: -0.01em; color: var(--kx-on-surface); } .kx-label { diff --git a/app/layout.tsx b/app/layout.tsx index f7f11fe..0c371d1 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,12 +1,13 @@ import type { Metadata } from "next"; import Script from "next/script"; -import { Space_Grotesk, Inter, Manrope } from "next/font/google"; +import { Space_Grotesk, Inter, Manrope, Bagel_Fat_One } from "next/font/google"; import "./globals.css"; import DashboardShell from "./components/DashboardShell"; const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], variable: "--font-kx-display", display: "swap" }); const inter = Inter({ subsets: ["latin"], variable: "--font-kx-body", display: "swap" }); const manrope = Manrope({ subsets: ["latin"], variable: "--font-kx-label", display: "swap" }); +const bagel = Bagel_Fat_One({ weight: "400", subsets: ["latin"], variable: "--font-kx-hero", display: "swap" }); export const metadata: Metadata = { title: { @@ -103,7 +104,7 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - +