feat: Replace IBM Plex fonts with Syne and Syne Mono in layout and Ta…

…ilwind configuration
SivaramPg · Dec 16, 2024 · bf7e335 · bf7e335
1 parent 821883b
commit bf7e335
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
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 { IBM_Plex_Mono, IBM_Plex_Sans } from "next/font/google"
+import { Syne, Syne_Mono } from "next/font/google"
 import Image from "next/image"
 
 import QuickLinks from "@/components/QuickLinks"
@@ -12,22 +12,22 @@ import { AllSystemsNormal } from "./_components/all-systems-normal"
 import NewNavbar from "./_components/new-navbar"
 import { Providers } from "./providers"
 
-const jetBrainsMono = IBM_Plex_Mono({
+const syneMono = Syne_Mono({
 	subsets: ["latin"],
 	display: "swap",
 	preload: true,
 	style: "normal",
-	weight: ["400", "700"],
-	variable: "--font-ibm-plex-mono",
+	weight: ["400"],
+	variable: "--font-syne-mono",
 })
 
-const mulish = IBM_Plex_Sans({
+const syne = Syne({
 	subsets: ["latin"],
 	display: "swap",
 	preload: true,
 	style: "normal",
-	weight: ["400", "500", "600", "700"],
-	variable: "--font-ibm-plex-sans",
+	weight: ["400", "500", "700"],
+	variable: "--font-syne",
 })
 
 export const metadata: Metadata = {
@@ -80,7 +80,7 @@ export default function RootLayout({
 	return (
 		<html lang="en" suppressHydrationWarning>
 			<body
-				className={`${jetBrainsMono.variable} ${mulish.variable} font-sans className="bg-[#f5f5f5] text-[#121212] dark:bg-[#121212] dark:text-[#f5f5f5]`}
+				className={`${syne.variable} ${syne.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,8 +11,8 @@ export default {
 	theme: {
 		extend: {
 			fontFamily: {
-				sans: ["var(--font-ibm-plex-sans)", ...fontFamily.sans],
-				mono: ["var(--font-ibm-plex-mono)", ...fontFamily.mono],
+				sans: ["var(--font-syne)", ...fontFamily.sans],
+				mono: ["var(--font-syne-mono)", ...fontFamily.mono],
 			},
 		},
 	},