diff --git a/index.html b/index.html
index 7a321795c..fdf4996c6 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,8 @@
+
+
diff --git a/public/fonts.css b/public/fonts.css
new file mode 100644
index 000000000..62a2bc335
--- /dev/null
+++ b/public/fonts.css
@@ -0,0 +1,7 @@
+@font-face {
+ font-family: 'ABCRom';
+ src: url('fonts/ABCRom.woff2') format('woff2');
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap; /* prevents invisible text flash */
+}
\ No newline at end of file
diff --git a/public/fonts/ABCRom.woff2 b/public/fonts/ABCRom.woff2
new file mode 100644
index 000000000..17c6b6bc7
Binary files /dev/null and b/public/fonts/ABCRom.woff2 differ
diff --git a/src/assets/palettes/dark.json b/src/assets/palettes/dark.json
index 508ec5804..84b398e49 100644
--- a/src/assets/palettes/dark.json
+++ b/src/assets/palettes/dark.json
@@ -54,6 +54,7 @@
"bg-color": "#202020",
"comfy-menu-bg": "#353535",
"comfy-menu-secondary-bg": "#303030",
+ "font-family": "Arial, Helvetica, sans-serif",
"comfy-input-bg": "#222",
"input-text": "#ddd",
"descrip-text": "#999",
diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index d21d17bfd..3b65d254a 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/src/components/topbar/TopMenubar.vue
@@ -105,7 +105,7 @@ onMounted(() => {
background: var(--comfy-menu-bg);
color: var(--fg-color);
box-shadow: var(--bar-shadow);
- font-family: Arial, Helvetica, sans-serif;
+ font-family: var(--font-family);
font-size: 0.8em;
box-sizing: border-box;
z-index: 1000;
diff --git a/src/extensions/core/groupNodeManage.css b/src/extensions/core/groupNodeManage.css
index 11c2e7f54..fcdd7a735 100644
--- a/src/extensions/core/groupNodeManage.css
+++ b/src/extensions/core/groupNodeManage.css
@@ -2,7 +2,7 @@
background: var(--bg-color);
color: var(--fg-color);
padding: 0;
- font-family: Arial, Helvetica, sans-serif;
+ font-family: var(--font-family);
border-color: black;
margin: 20vh auto;
max-height: 60vh;
diff --git a/src/schemas/colorPaletteSchema.ts b/src/schemas/colorPaletteSchema.ts
index 9001eff2a..847b0cc5c 100644
--- a/src/schemas/colorPaletteSchema.ts
+++ b/src/schemas/colorPaletteSchema.ts
@@ -63,6 +63,7 @@ const comfyBaseSchema = z.object({
['comfy-menu-bg']: z.string(),
['comfy-menu-secondary-bg']: z.string(),
['comfy-input-bg']: z.string(),
+ ['font-family']: z.string(),
['input-text']: z.string(),
['descrip-text']: z.string(),
['drag-text']: z.string(),
diff --git a/src/scripts/ui/menu/menu.css b/src/scripts/ui/menu/menu.css
index 33589de9c..43d7ba46d 100644
--- a/src/scripts/ui/menu/menu.css
+++ b/src/scripts/ui/menu/menu.css
@@ -36,6 +36,11 @@
color: var(--primary-hover-fg) !important;
}
+@font-face {
+ font-family: 'ABCRom';
+ src: url('../../assets/fonts/ABCRom.woff2') format('woff2');
+}
+
/* Popup */
.comfyui-popup {
position: absolute;
@@ -169,7 +174,7 @@
.comfy-widget-selection-dialog div {
color: var(--fg-color);
- font-family: Arial, Helvetica, sans-serif;
+ font-family: 'ABCRom', sans-serif;
}
.comfy-widget-selection-dialog h2 {