fix font family settings

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,17 +16,22 @@ const settings = useSettingsStore();
 const activeTab = ref('params');
 const isLoading = ref(false);
 
-const transparentTheme = EditorView.theme({
+const extensions = computed(() => {
+  const theme = EditorView.theme({
     "&": { 
       backgroundColor: "transparent !important", 
-    height: "100%" 
+      height: "100%",
+    },
+    ".cm-content, .cm-gutter": {
+      fontFamily: `${settings.editorFontFamily} !important`
     },
     ".cm-gutters": { 
       backgroundColor: "transparent !important" 
     }
   });
   
-const extensions = [json(), oneDark, transparentTheme];
+  return [json(), oneDark, theme];
+});
 
 const methods = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'];
 

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({
+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 '';