Playground: Use Geist fonts (#8133)

MananTank · MananTank · commit 108a79ab3ee7 · 2025-09-26T11:47:00.000Z
&lt;!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

--&gt;

&lt;!-- start pr-codex --&gt;

---

## PR-Codex overview
This PR primarily focuses on integrating the `geist` font into the `playground-web` application, updating the `tailwind` configuration, and replacing existing font imports with `GeistSans` and `GeistMono`.

### Detailed summary
- Added `geist` dependency in `package.json`.
- Updated `tailwind.config.ts` to extend the theme with `geist` font families.
- Replaced `Fira_Code` and `Inter` font imports in `layout.tsx` with `GeistMono` and `GeistSans`.
- Updated the body class to use `GeistSans` and `GeistMono` variables.

&gt; ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

&lt;!-- end pr-codex --&gt;

&lt;!-- This is an auto-generated comment: release notes by coderabbit.ai --&gt;

## Summary by CodeRabbit

- Style
  - Updated global typography to Geist Sans and Geist Mono for a cleaner, consistent look.
  - Replaced previous Inter and Fira Code fonts with new Geist font variables in the app layout.
  - Configured Tailwind to use Geist-based sans and mono font families across the app.

- Chores
  - Added Geist font package as a new dependency.

- Notes
  - No functional changes; visual update limited to typography.

&lt;!-- end of auto-generated comment: release notes by coderabbit.ai --&gt;
diff --git a/apps/playground-web/package.json b/apps/playground-web/package.json
@@ -26,6 +26,7 @@
     "clsx": "^2.1.1",
     "date-fns": "4.1.0",
     "fetch-event-stream": "0.1.5",
+    "geist": "^1.5.1",
     "lucide-react": "0.525.0",
     "next": "15.3.5",
     "next-themes": "^0.4.6",
diff --git a/apps/playground-web/src/app/layout.tsx b/apps/playground-web/src/app/layout.tsx
@@ -1,26 +1,15 @@
 import type { Metadata } from "next";
-import { Fira_Code, Inter } from "next/font/google";
 import { metadataBase } from "@/lib/constants";
 import { cn } from "@/lib/utils";
 import { AppSidebarLayout } from "./AppSidebar";
 import { Providers } from "./providers";
 import "@workspace/ui/global.css";
+import { GeistMono } from "geist/font/mono";
+import { GeistSans } from "geist/font/sans";
 import { ThemeProvider } from "next-themes";
 import NextTopLoader from "nextjs-toploader";
 import { Toaster } from "sonner";
 
-const sansFont = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
-  weight: "variable",
-});
-
-const monoFont = Fira_Code({
-  subsets: ["latin"],
-  variable: "--font-mono",
-  weight: "variable",
-});
-
 export const metadata: Metadata = {
   description: "thirdweb playground",
   metadataBase,
@@ -37,8 +26,8 @@ export default async function RootLayout({
       <body
         className={cn(
           "bg-background font-sans antialiased ",
-          sansFont.variable,
-          monoFont.variable,
+          GeistSans.variable,
+          GeistMono.variable,
         )}
       >
         <ThemeProvider
diff --git a/apps/playground-web/tailwind.config.ts b/apps/playground-web/tailwind.config.ts
@@ -3,6 +3,16 @@ import type { Config } from "tailwindcss";
 
 const config: Config = {
   ...tailwindConfig,
+  theme: {
+    ...tailwindConfig.theme,
+    extend: {
+      ...tailwindConfig.theme?.extend,
+      fontFamily: {
+        sans: ["var(--font-geist-sans)"],
+        mono: ["var(--font-geist-mono)"],
+      },
+    },
+  },
   content: [
     "./src/**/*.{ts,tsx}",
     // add contents of ui package
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
