diff --git a/src/FiraCode.ttf b/src/FiraCode.ttf
new file mode 100644
index 0000000..575c21b
Binary files /dev/null and b/src/FiraCode.ttf differ
diff --git a/src/Fixedsys.ttf b/src/Fixedsys.ttf
new file mode 100644
index 0000000..2bfef30
Binary files /dev/null and b/src/Fixedsys.ttf differ
diff --git a/src/Inconsolata-Regular.ttf b/src/Inconsolata.ttf
similarity index 100%
rename from src/Inconsolata-Regular.ttf
rename to src/Inconsolata.ttf
diff --git a/src/Monoid.ttf b/src/Monoid.ttf
new file mode 100644
index 0000000..a09e9fa
Binary files /dev/null and b/src/Monoid.ttf differ
diff --git a/src/index.html b/src/index.html
index efb8c87..277e070 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,6 +11,30 @@
 		<link rel="stylesheet" href="lib/hint.min.css">
 		<link rel="stylesheet" href="lib/inlet.css">
 		<link rel="stylesheet" href="style.css">
+		<style id="fontStyleTemplate" type="template">
+			@font-face {
+				font-family: 'fontname';
+				font-style: normal;
+				font-weight: 400;
+				src: url(../fontname.ttf) format('truetype');
+				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+			}
+			.Codemirror pre {
+				font-family: 'fontname', monospace;
+			}
+		</style>
+		<style type="text/css" id="fontStyleTag">
+			@font-face {
+				font-family: 'FiraCode';
+				font-style: normal;
+				font-weight: 400;
+				src: url(../FiraCode.ttf) format('truetype');
+				unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+			}
+			.Codemirror pre {
+				font-family: 'FiraCode', monospace;
+			}
+		</style>
 	</head>
 
 	<body>
@@ -382,6 +406,15 @@
 						Theme
 						<select style="flex:1;margin:0 20px" data-setting="editorTheme" d-change="updateSetting"></select>
 					</label>
+					<label class="line">
+						Font
+						<select style="flex:1;margin:0 20px" data-setting="editorFont" d-change="updateSetting">
+							<option value="FiraCode">Fira Code</option>
+							<option value="Inconsolata">Inconsolata</option>
+							<option value="Monoid">Monoid</option>
+							<option value="FixedSys">FixedSys</option>
+						</select>
+					</label>
 					<label class="line">
 						Font Size <input type="number" value="16" data-setting="fontSize" d-change="updateSetting"> px
 
diff --git a/src/script.js b/src/script.js
index eafce90..f66b0d9 100644
--- a/src/script.js
+++ b/src/script.js
@@ -5,7 +5,7 @@ addLibraryModal, addLibraryModal, notificationsBtn, notificationsModal, notifica
 notificationsModal, notificationsBtn, codepenBtn, saveHtmlBtn, saveBtn, settingsBtn,
 onboardModal, settingsModal, notificationsBtn, onboardShowInTabOptionBtn, editorThemeLinkTag,
 onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentationSizeValueEl,
-runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
+runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate
 */
 /* eslint-disable no-extra-semi */
 ;(function (alertsService) {
@@ -1235,6 +1235,7 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
 		$('[data-setting=fontSize]').value = prefs.fontSize || 16;
 		$('[data-setting=refreshOnResize]').checked = prefs.refreshOnResize;
 		$('[data-setting=autoPreview]').checked = prefs.autoPreview;
+		$('[data-setting=editorFont]').value = prefs.editorFont;
 	}
 
 	/**
@@ -1266,18 +1267,19 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
 		// Update indentation count when slider is updated
 		indentationSizeValueEl.textContent = $('[data-setting=indentSize]').value;
 
+		// Replace correct css file in LINK tags's href
+		editorThemeLinkTag.href = '/lib/codemirror/theme/' + prefs.editorTheme + '.css';
+		fontStyleTag.textContent = fontStyleTemplate.textContent.replace(/fontname/g, prefs.editorFont || 'FiraCode');
+
 		['html', 'js', 'css'].forEach((type) => {
 			scope.cm[type].setOption(
 				'indentWithTabs',
 				$('[data-setting=indentWith]:checked').value !== 'spaces'
 			);
-
 			scope.cm[type].setOption('blastCode', $('[data-setting=isCodeBlastOn]').checked ? { effect: 2, shake: false } : false);
 			scope.cm[type].setOption('indentUnit', +$('[data-setting=indentSize]').value);
 			scope.cm[type].setOption('tabSize', +$('[data-setting=indentSize]').value);
 			scope.cm[type].setOption('theme', $('[data-setting=editorTheme]').value);
-			// Replace correct css file in LINK tags's href
-			editorThemeLinkTag.href = '/lib/codemirror/theme/' + prefs.editorTheme + '.css';
 
 			scope.cm[type].setOption('keyMap', $('[data-setting=keymap]:checked').value);
 			scope.cm[type].refresh();
@@ -1590,7 +1592,6 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
 				}, 350);
 				toggleSavedItemsPane();
 			}
-			console.log(event.keyCode)
 
 			// Fork shortcut inside saved creations panel with Ctrl/⌘ + F
 			if ((event.ctrlKey || event.metaKey) && (event.keyCode === 70)) {
@@ -1690,7 +1691,8 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
 			keymap: 'sublime',
 			fontSize: 16,
 			refreshOnResize: false,
-			autoPreview: true
+			autoPreview: true,
+			editorFont: 'FiraCode'
 		}, function syncGetCallback(result) {
 			if (result.preserveLastCode && lastCode) {
 				unsavedEditCount = 0;
@@ -1721,6 +1723,7 @@ runBtn, searchInput, consoleEl, consoleLogEl, logCountEl
 			prefs.fontSize = result.fontSize;
 			prefs.refreshOnResize = result.refreshOnResize;
 			prefs.autoPreview = result.autoPreview;
+			prefs.editorFont = result.editorFont;
 
 			updateSettingsInUi();
 			scope.updateSetting();
diff --git a/src/style.css b/src/style.css
index 30b38b0..6dce225 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,10 +1,3 @@
-@font-face {
-	font-family: 'Inconsolata';
-	font-style: normal;
-	font-weight: 400;
-	src: local('Inconsolata'), url(../Inconsolata-Regular.ttf) format('truetype');
-	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
 :root {
 	--color-bg: #252637;
 	--color-sidebar: #3A2B63;
@@ -240,7 +233,7 @@ select, input[type="text"], input[type="number"],  textarea {
 	height: calc(100%);
 }
 .Codemirror pre {
-	font-family: 'Inconsolata', monospace;
+	font-variant-ligatures: contextual;
 }
 .cm-s-monokai .CodeMirror-linenumber {
 	color:rgba(255,255,255,0.2);
