feat: Update font configuration to use Chivo and Chivo Mono; adjust g…

…lobal styles
SivaramPg · Dec 21, 2024 · 3ac0bc0 · 3ac0bc0
1 parent 17d7e70
commit 3ac0bc0
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -11,6 +11,7 @@ html .shiki {
   @apply !overflow-x-auto;
   background: #d4d4d411 !important;
   @apply !p-2 sm:!p-4 md:!p-6;
-  @apply !text-sm sm:!text-base md:!text-lg;
+  @apply !text-sm sm:!text-base;
+  @apply !font-mono;
   /* @apply !text-wrap; */
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import "./globals.css"
 
 import type { Metadata } from "next"
-import { Inter } from "next/font/google"
+import { Chivo, Chivo_Mono } from "next/font/google"
 import Image from "next/image"
 
 import QuickLinks from "@/components/QuickLinks"
@@ -12,13 +12,22 @@ import { AllSystemsNormal } from "./_components/all-systems-normal"
 import NewNavbar from "./_components/new-navbar"
 import { Providers } from "./providers"
 
-const syne = Inter({
+const chivo = Chivo({
 	subsets: ["latin"],
 	display: "swap",
 	preload: true,
 	style: "normal",
 	weight: ["400", "500", "600", "700", "800"],
-	variable: "--font-syne",
+	variable: "--font-chivo",
+})
+
+const chivoMono = Chivo_Mono({
+	subsets: ["latin"],
+	display: "swap",
+	preload: true,
+	style: "normal",
+	weight: ["400", "500", "600", "700", "800"],
+	variable: "--font-chivo-mono",
 })
 
 export const metadata: Metadata = {
@@ -71,7 +80,7 @@ export default function RootLayout({
 	return (
 		<html lang="en" suppressHydrationWarning>
 			<body
-				className={`${syne.variable} font-sans className="bg-[#f5f5f5] text-[#121212] dark:bg-[#121212] dark:text-[#f5f5f5]`}
+				className={`${chivo.variable} ${chivoMono.variable} font-sans className="bg-[#f5f5f5] text-[#121212] dark:bg-[#121212] dark:text-[#f5f5f5]`}
 			>
 				<Providers>
 					<Image

diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -11,7 +11,8 @@ export default {
 	theme: {
 		extend: {
 			fontFamily: {
-				sans: ["var(--font-syne)", ...fontFamily.sans],
+				sans: ["var(--font-chivo)", ...fontFamily.sans],
+				mono: ["var(--font-chivo-mono)", ...fontFamily.mono],
 			},
 		},
 	},