diff --git a/packages/react/src/components/CodeMirror6.jsx b/packages/react/src/components/CodeMirror6.jsx
index 09a02211..319fb7f7 100644
--- a/packages/react/src/components/CodeMirror6.jsx
+++ b/packages/react/src/components/CodeMirror6.jsx
@@ -101,6 +101,7 @@ export default function CodeMirror({
   theme,
   keybindings,
   fontSize = 18,
+  fontFamily = 'monospace',
   options,
   editorDidMount,
 }) {
@@ -135,7 +136,7 @@ export default function CodeMirror({
     return staticExtensions;
   }, [keybindings]);
   return (
-    <div style={{ fontSize }} className="w-full">
+    <div style={{ fontSize, fontFamily }} className="w-full">
       <_CodeMirror
         value={value}
         theme={theme || strudelTheme}
diff --git a/packages/react/src/themes/algoboy.js b/packages/react/src/themes/algoboy.js
index 33b259a0..b4db09de 100644
--- a/packages/react/src/themes/algoboy.js
+++ b/packages/react/src/themes/algoboy.js
@@ -12,7 +12,6 @@ export const settings = {
   gutterBackground: 'transparent',
   gutterForeground: '#0f380f',
   light: true,
-  fontFamily: 'PressStart, monospace',
 };
 export default createTheme({
   theme: 'light',
diff --git a/packages/react/src/themes/blackscreen.js b/packages/react/src/themes/blackscreen.js
index f1e477f0..ac9627c3 100644
--- a/packages/react/src/themes/blackscreen.js
+++ b/packages/react/src/themes/blackscreen.js
@@ -7,10 +7,9 @@ export const settings = {
   selection: '#ffffff20',
   selectionMatch: '#036dd626',
   lineHighlight: '#ffffff10',
+  lineBackground: '#00000050',
   gutterBackground: 'transparent',
   gutterForeground: '#8a919966',
-  fontFamily: 'BigBlueTerminal, monospace',
-  //fontFamily: 'x3270, monospace',
 };
 export default createTheme({
   theme: 'dark',
diff --git a/packages/react/src/themes/bluescreen.js b/packages/react/src/themes/bluescreen.js
index 661fcf68..4f72d8c5 100644
--- a/packages/react/src/themes/bluescreen.js
+++ b/packages/react/src/themes/bluescreen.js
@@ -12,7 +12,6 @@ export const settings = {
   gutterBackground: 'transparent',
   // gutterForeground: '#8a919966',
   gutterForeground: '#8a919966',
-  fontFamily: 'BigBlueTerminal, monospace',
 };
 
 export default createTheme({
diff --git a/packages/react/src/themes/terminal.js b/packages/react/src/themes/terminal.js
index e7c3cc65..1374bb86 100644
--- a/packages/react/src/themes/terminal.js
+++ b/packages/react/src/themes/terminal.js
@@ -9,8 +9,6 @@ export const settings = {
   lineHighlight: '#ffffff10',
   gutterBackground: 'transparent',
   gutterForeground: '#8a919966',
-  //fontFamily: 'BigBlueTerminal, monospace',
-  fontFamily: 'x3270, monospace',
 };
 export default createTheme({
   theme: 'dark',
diff --git a/packages/react/src/themes/whitescreen.js b/packages/react/src/themes/whitescreen.js
index 9206b837..22abad9e 100644
--- a/packages/react/src/themes/whitescreen.js
+++ b/packages/react/src/themes/whitescreen.js
@@ -11,7 +11,6 @@ export const settings = {
   gutterBackground: 'transparent',
   gutterForeground: 'black',
   light: true,
-  fontFamily: 'BigBlueTerminal, monospace',
 };
 export default createTheme({
   theme: 'light',
diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx
index 384e95ef..c9c37c53 100644
--- a/website/src/repl/Footer.jsx
+++ b/website/src/repl/Footer.jsx
@@ -279,18 +279,31 @@ function FormItem({ label, children }) {
 }
 
 const themeOptions = Object.fromEntries(Object.keys(themes).map((k) => [k, k]));
+const fontFamilyOptions = {
+  monospace: 'monospace',
+  BigBlueTerminal: 'BigBlueTerminal',
+  x3270: 'x3270',
+  PressStart: 'PressStart2P',
+};
 
 function SettingsTab() {
   const { state, update, reset } = useStore();
-  const { theme, keybindings, fontSize } = state;
+  const { theme, keybindings, fontSize, fontFamily } = state;
   return (
     <div className="text-foreground p-4 space-y-4">
+      <FormItem label="Theme">
+        <SelectInput
+          options={themeOptions}
+          value={theme}
+          onChange={(theme) => update((current) => ({ ...current, theme }))}
+        />
+      </FormItem>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <FormItem label="Theme">
+        <FormItem label="Font Family">
           <SelectInput
-            options={themeOptions}
-            value={theme}
-            onChange={(theme) => update((current) => ({ ...current, theme }))}
+            options={fontFamilyOptions}
+            value={fontFamily}
+            onChange={(fontFamily) => update((current) => ({ ...current, fontFamily }))}
           />
         </FormItem>
         <FormItem label="Font Size">
diff --git a/website/src/repl/Repl.css b/website/src/repl/Repl.css
index e707e6b1..97cd7a60 100644
--- a/website/src/repl/Repl.css
+++ b/website/src/repl/Repl.css
@@ -17,6 +17,7 @@
 
 #code .cm-scroller {
   padding-bottom: 50vh;
+  font-family: inherit;
 }
 #code .cm-line > * {
   background: var(--lineBackground);
diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index ef8f427f..24755c15 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -121,7 +121,7 @@ export function Repl({ embedded = false }) {
 
   const { theme, themeSettings } = useTheme();
   const {
-    state: { keybindings, fontSize },
+    state: { keybindings, fontSize, fontFamily },
   } = useStore();
 
   const { code, setCode, scheduler, evaluate, activateCode, isDirty, activeCode, pattern, started, stop, error } =
@@ -283,6 +283,7 @@ export function Repl({ embedded = false }) {
             value={code}
             keybindings={keybindings}
             fontSize={fontSize}
+            fontFamily={fontFamily}
             onChange={handleChangeCode}
             onViewChanged={setView}
             onSelectionChange={handleSelectionChange}
diff --git a/website/src/repl/themes.mjs b/website/src/repl/themes.mjs
index 3b4cd624..87abe089 100644
--- a/website/src/repl/themes.mjs
+++ b/website/src/repl/themes.mjs
@@ -410,7 +410,6 @@ export const settings = {
     gutterBackground: '#1e1e1e',
     gutterForeground: '#838383',
     gutterActiveForeground: '#fff',
-    fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
   },
   xcodeLight: {
     light: true,
diff --git a/website/src/store.mjs b/website/src/store.mjs
index b2e0b4e6..b7348231 100644
--- a/website/src/store.mjs
+++ b/website/src/store.mjs
@@ -2,6 +2,7 @@ export const storeKey = 'strudel-settings';
 const defaults = {
   keybindings: 'codemirror',
   theme: 'strudelTheme',
+  fontFamily: 'monospace',
   fontSize: 18,
 };