From c2cf6fd6440b5f8b559f41e9ee073564ade4ce3d Mon Sep 17 00:00:00 2001
From: Julian Freeman <freemanjulian372@gmail.com>
Date: Mon, 1 Dec 2025 09:03:01 -0400
Subject: [PATCH] fix font family settings

---
 src/components/RequestPanel.vue  | 27 ++++++++++++++++-----------
 src/components/ResponsePanel.vue | 25 +++++++++++++++----------
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/src/components/RequestPanel.vue b/src/components/RequestPanel.vue
index a77d328..9924c6a 100644
--- a/src/components/RequestPanel.vue
+++ b/src/components/RequestPanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { useRequestStore } from '../stores/requestStore';
 import { useSettingsStore } from '../stores/settingsStore';
 import KeyValueEditor from './KeyValueEditor.vue';
@@ -16,18 +16,23 @@ const settings = useSettingsStore();
 const activeTab = ref('params');
 const isLoading = ref(false);
 
-const transparentTheme = EditorView.theme({
-  "&": { 
-    backgroundColor: "transparent !important", 
-    height: "100%" 
-  },
-  ".cm-gutters": { 
-    backgroundColor: "transparent !important" 
-  }
+const extensions = computed(() => {
+  const theme = EditorView.theme({
+    "&": { 
+      backgroundColor: "transparent !important", 
+      height: "100%",
+    },
+    ".cm-content, .cm-gutter": {
+      fontFamily: `${settings.editorFontFamily} !important`
+    },
+    ".cm-gutters": { 
+      backgroundColor: "transparent !important" 
+    }
+  });
+  
+  return [json(), oneDark, theme];
 });
 
-const extensions = [json(), oneDark, transparentTheme];
-
 const methods = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'];
 
 const executeRequest = async () => {
diff --git a/src/components/ResponsePanel.vue b/src/components/ResponsePanel.vue
index 70c1dee..7cb25bb 100644
--- a/src/components/ResponsePanel.vue
+++ b/src/components/ResponsePanel.vue
@@ -10,17 +10,22 @@ import { EditorView } from '@codemirror/view'; // Import EditorView
 const store = useRequestStore();
 const settings = useSettingsStore();
 
-const transparentTheme = EditorView.theme({
-  "&": {
-    backgroundColor: "transparent !important",
-    height: "100%"
-  },
-  ".cm-gutters": {
-    backgroundColor: "transparent !important"
-  }
-});
+const extensions = computed(() => {
+  const theme = EditorView.theme({
+    "&": {
+      backgroundColor: "transparent !important",
+      height: "100%"
+    },
+    ".cm-content, .cm-gutter": {
+      fontFamily: `${settings.editorFontFamily} !important`
+    },
+    ".cm-gutters": {
+      backgroundColor: "transparent !important"
+    }
+  });
 
-const extensions = [json(), oneDark, transparentTheme, EditorView.editable.of(false)];
+  return [json(), oneDark, theme, EditorView.editable.of(false)];
+});
 
 const formattedBody = computed(() => {
     if (!store.activeRequest.response) return '';