diff --git a/app/globals.css b/app/globals.css index d8d990b..1da3194 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,6 +1,5 @@ @import "tailwindcss"; @import "tw-animate-css"; -@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Outfit:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); @custom-variant dark (&:is(.dark *)); @@ -12,8 +11,9 @@ @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); + --font-sans: var(--font-outfit); + --font-serif: var(--font-newsreader); + --font-mono: var(--font-ibm-plex-mono); --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); @@ -125,5 +125,31 @@ } body { @apply bg-background text-foreground; + font-family: var(--font-outfit), 'Outfit', sans-serif; + } + button { + font-family: var(--font-outfit), 'Outfit', sans-serif; + cursor: pointer; + } + input, textarea, select { + font-family: var(--font-outfit), 'Outfit', sans-serif; + } + input::placeholder { + color: #b5b0a6; + } + ::selection { + background: #1a1a1a; + color: #fff; + } + ::-webkit-scrollbar { + width: 4px; + height: 4px; + } + ::-webkit-scrollbar-track { + background: transparent; + } + ::-webkit-scrollbar-thumb { + background: #d0ccc4; + border-radius: 10px; } } diff --git a/app/layout.tsx b/app/layout.tsx index 3dac629..45c647b 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,17 +1,26 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { Outfit, Newsreader, IBM_Plex_Mono } from "next/font/google"; import "./globals.css"; import { Toaster } from "@/components/ui/sonner"; import { Providers } from "@/app/components/Providers"; -const geistSans = Geist({ - variable: "--font-geist-sans", +const outfit = Outfit({ + variable: "--font-outfit", subsets: ["latin"], + weight: ["300", "400", "500", "600", "700"], }); -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", +const newsreader = Newsreader({ + variable: "--font-newsreader", subsets: ["latin"], + weight: ["400", "500"], + style: ["normal", "italic"], +}); + +const ibmPlexMono = IBM_Plex_Mono({ + variable: "--font-ibm-plex-mono", + subsets: ["latin"], + weight: ["400", "500"], }); export const metadata: Metadata = { @@ -27,7 +36,7 @@ export default function RootLayout({ return ( {children}