From eff54a38e1b255c8c0aa76001527a01b0f721b40 Mon Sep 17 00:00:00 2001
From: Jiwon Choi <devjiwonchoi@gmail.com>
Date: Sat, 21 Dec 2024 05:32:14 +0900
Subject: [PATCH] Use Geist font in Dev Overlay (#74160)

This PR added Geist font to be used in Dev Overlay.

![CleanShot 2024-12-21 at 00 19
03](https://github.com/user-attachments/assets/0f126e2b-922a-4489-b356-cf0e09d361bb)

Closes NDX-572
---
 .../_experimental/internal/styles/Base.tsx            | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/Base.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/Base.tsx
index de83c0feb98c0..7c8edff482791 100644
--- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/Base.tsx
+++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/styles/Base.tsx
@@ -5,6 +5,8 @@ export function Base() {
   return (
     <style>
       {css`
+        @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;900&family=Geist+Mono:wght@400;900&display=swap');
+
         :host {
           --size-gap-half: 4px;
           --size-gap: 8px;
@@ -35,9 +37,10 @@ export function Base() {
           --color-text-color-red-1: #ff5555;
           --color-text-background-red-1: #fff9f9;
 
-          --font-stack-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono',
-            Menlo, Courier, monospace;
-          --font-stack-sans: -apple-system, 'Source Sans Pro', sans-serif;
+          --font-stack-monospace: 'Geist Mono', 'SFMono-Regular', Consolas,
+            'Liberation Mono', Menlo, Courier, monospace;
+          --font-stack-sans: 'Geist', -apple-system, 'Source Sans Pro',
+            sans-serif;
 
           --color-ansi-selection: rgba(95, 126, 151, 0.48);
           --color-ansi-bg: #111111;
@@ -59,6 +62,8 @@ export function Base() {
           --color-ansi-bright-magenta: #cebbff;
           --color-ansi-bright-red: #ff8888;
           --color-ansi-bright-yellow: #ffd966;
+
+          font-family: var(--font-stack-sans);
         }
 
         @media (prefers-color-scheme: dark) {