use mono font for code

components/FooterMenu.tsx

@@ -111,7 +111,7 @@ const FooterMenu = () => {
           </div>
         ))}
         <div className="flex items-center justify-between md:col-span-6">
-          <div className="font-mono text-sm">© {new Date().getFullYear()} LibreChat</div>
+          <div className="font-sans text-sm">© {new Date().getFullYear()} LibreChat</div>
           <div className="flex ml-auto">
             <SocialIcon
               url="https://github.librechat.ai/"

pages/_app.tsx

@@ -11,7 +11,7 @@ import { Hubspot, hsPageView } from '@/components/analytics/hubspot'
 import { GeistSans } from 'geist/font/sans'
 import { Analytics } from '@vercel/analytics/react'
 import { SpeedInsights } from '@vercel/speed-insights/next'
-// import { GeistMono } from "geist/font/mono";
+import { GeistMono } from 'geist/font/mono'
 
 export default function App({ Component, pageProps }) {
   const router = useRouter()
@@ -37,8 +37,10 @@ export default function App({ Component, pageProps }) {
     }
   }, [])
   return (
-    // <div className={`${GeistSans.variable} font-sans ${GeistMono.variable}`}>
-    <div className={`${GeistSans.variable}`}>
+    <div
+      className={`${GeistSans.variable} font-sans ${GeistMono.variable} font-mono ${GeistSans.variable} `}
+    >
+      {/* <div className={`${GeistSans.variable}`}> */}
       <PostHogProvider client={posthog}>
         <Component {...pageProps} />
         <Analytics />

style.css

@@ -97,6 +97,7 @@
 
   body {
     @apply bg-background text-foreground !important;
+    font-family: var(--font-sans);
     font-feature-settings:
       'rlig' 1,
       'calt' 1;
@@ -104,13 +105,16 @@
 
   footer {
     @apply bg-background text-foreground !important;
+    font-family: var(--font-sans);
   }
 
   h1 {
     @apply tracking-tight font-mono leading-tight;
+    font-family: var(--font-sans);
   }
 
   h2 {
     @apply tracking-tight;
+    font-family: var(--font-sans);
   }
 }