diff --git a/packages/web/src/query/AceEditor.svelte b/packages/web/src/query/AceEditor.svelte
index e4527485c..abcb000d3 100644
--- a/packages/web/src/query/AceEditor.svelte
+++ b/packages/web/src/query/AceEditor.svelte
@@ -114,7 +114,13 @@
   import 'ace-builds/src-noconflict/theme-tomorrow_night';
   import 'ace-builds/src-noconflict/theme-twilight';
 
-  import { currentDropDownMenu, currentEditorFontSize, currentEditorTheme, currentThemeDefinition } from '../stores';
+  import {
+    currentDropDownMenu,
+    currentEditorFontSize,
+    currentEditorFont,
+    currentEditorTheme,
+    currentThemeDefinition,
+  } from '../stores';
   import _ from 'lodash';
   import { handleCommandKeyDown } from '../commands/CommandListener.svelte';
   import resizeObserver from '../utility/resizeObserver';
@@ -223,12 +229,15 @@
     }
   }
 
-  $: watchOptions(options);
-  function watchOptions(newOption: any) {
+  $: watchOptions(options, $currentEditorFont);
+  function watchOptions(newOption: any, fontFamily) {
     if (editor) {
       editor.setOptions({
         ...stdOptions,
         ...newOption,
+        fontFamily: fontFamily || 'Menlo, Monaco, Ubuntu Mono, Consolas, source-code-pro, monospace',
+        // fontFamily: 'tahoma,Menlo',
+        // fontSize: '10pt',
       });
     }
   }
diff --git a/packages/web/src/settings/SettingsModal.svelte b/packages/web/src/settings/SettingsModal.svelte
index 8c0dd5d4b..05c9f6d7f 100644
--- a/packages/web/src/settings/SettingsModal.svelte
+++ b/packages/web/src/settings/SettingsModal.svelte
@@ -127,7 +127,7 @@ ORDER BY
           <div class="heading">Editor theme</div>
 
           <div class="flex">
-            <div class="col-6">
+            <div class="col-4">
               <FormFieldTemplateLarge label="Theme" type="combo">
                 <SelectField
                   isNative
@@ -139,7 +139,7 @@ ORDER BY
               </FormFieldTemplateLarge>
             </div>
 
-            <div class="col-6">
+            <div class="col-4">
               <FormFieldTemplateLarge label="Font size " type="combo">
                 <SelectField
                   isNative
@@ -150,6 +150,10 @@ ORDER BY
                 />
               </FormFieldTemplateLarge>
             </div>
+
+            <div class="col-4">
+              <FormTextField name="editor.fontFamily" label="Editor font family" />
+            </div>
           </div>
 
           <div class="editor">
diff --git a/packages/web/src/stores.ts b/packages/web/src/stores.ts
index 4f24fe84b..1407396e5 100644
--- a/packages/web/src/stores.ts
+++ b/packages/web/src/stores.ts
@@ -68,6 +68,7 @@ export const currentEditorTheme = getElectron()
 export const currentEditorFontSize = getElectron()
   ? writableSettingsValue(null, 'currentEditorFontSize')
   : writableWithStorage(null, 'currentEditorFontSize');
+export const currentEditorFont = writableSettingsValue(null, 'editor.fontFamily');
 export const activeTabId = derived([openedTabs], ([$openedTabs]) => $openedTabs.find(x => x.selected)?.tabid);
 export const activeTab = derived([openedTabs], ([$openedTabs]) => $openedTabs.find(x => x.selected));
 export const recentDatabases = writableWithStorage([], 'recentDatabases');