uses ibm plex mono

Author: Dominique Chuo

src/components/CodeEditor/index.tsx

@@ -182,7 +182,7 @@ const CodeEditor = forwardRef<CodeEditorRef, CodeEditorProps>(
       editor.updateOptions({
         minimap: { enabled: false },
         fontSize: 16,
-        fontFamily: "'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace",
+        fontFamily: "'IBM Plex Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace",
         fontWeight: '500',
         lineNumbers: 'on',
         lineNumbersMinChars: 3,

src/components/InlineEditor/styles.module.css

@@ -163,7 +163,7 @@
   background: #F8F8F7;
   border-bottom: 3px solid #383838;
   overflow-x: auto;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-family: 'IBM Plex Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
   font-size: 16px;
   line-height: 1.6;
 }
@@ -240,7 +240,7 @@
 }
 
 .statementPreview {
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-family: 'IBM Plex Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
   font-size: 11px;
   opacity: 0.9;
   flex: 1;
@@ -348,7 +348,7 @@
 
 .commandBox code {
   flex: 1;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-family: 'IBM Plex Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
   font-size: 12px;
   color: #1F2937;
   background: transparent;

src/components/ResultViewer/styles.module.css

@@ -68,7 +68,7 @@
 .errorMessage {
   padding: 1rem;
   margin: 0;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-family: 'IBM Plex Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
   font-size: 14px;
   color: #374151;
   white-space: pre-wrap;
@@ -254,7 +254,7 @@
 .dataCell {
   padding: 0.75rem 0.875rem;
   border-right: 1px solid #E5E5E5;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-family: 'IBM Plex Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
   font-size: 14px;
 }
 

static/css/_blog.css

@@ -367,6 +367,7 @@ article[itemProp="blogPost"] .markdown,
   border-radius: 0 !important;
   padding: 0.125rem 0.375rem !important;
   font-weight: 500 !important;
+  font-family: 'IBM Plex Mono', monospace !important;
 }
 
 .blog-post-content pre {
@@ -383,6 +384,7 @@ article[itemProp="blogPost"] .markdown,
   border: none !important;
   padding: 0 !important;
   color: white !important;
+  font-family: 'IBM Plex Mono', monospace !important;
 }
 
 /* Blog Post Footer */

static/css/custom.css

@@ -44,6 +44,11 @@
 /* Import Tailwind CSS with all styles consolidated */
 @import './tailwind.css';
 
+/* Ensure IBM Plex Mono is used for all code elements */
+code, pre, kbd, samp, tt, .monospace {
+    font-family: 'IBM Plex Mono', monospace !important;
+}
+
 /* Navbar active item styling - Light mode */
 .navbar__link--active {
     color: white !important;

static/css/tailwind.css

@@ -62,7 +62,7 @@
   --docusaurus-highlighted-code-line-bg: rgba(37, 99, 235, 0.08);
   --ifm-background-color: #F4EFEA;
   --ifm-background-surface-color: #FEFEFE;
-  --ifm-font-family-monospace: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Menlo', 'Ubuntu Mono', monospace;
+  --ifm-font-family-monospace: 'IBM Plex Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Menlo', 'Ubuntu Mono', monospace;
   --ifm-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
   --ifm-font-color-base: #1a1a1a;
 
@@ -1007,7 +1007,7 @@ p, span, div {
 
   /* Font families */
   --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  --font-family-mono: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Menlo, 'Ubuntu Mono', monospace;
+  --font-family-mono: 'IBM Plex Mono', 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Menlo, 'Ubuntu Mono', monospace;
 }
 
 /* Component Styles - Buttons, Cards, and General Components */