style: Remove most font-family definitions, set to Inter on body

style: More Inter replacing Arial
Remove special fonts for tests

browser_tests/fixtures/ComfyPage.ts

@@ -324,19 +324,6 @@ export class ComfyPage {
     }
     await this.goto()
 
-    // Unify font for consistent screenshots.
-    await this.page.addStyleTag({
-      url: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'
-    })
-    await this.page.addStyleTag({
-      url: 'https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'
-    })
-    await this.page.addStyleTag({
-      content: `
-      * {
-        font-family: 'Roboto Mono', 'Noto Color Emoji';
-      }`
-    })
     await this.page.waitForFunction(() => document.fonts.ready)
     await this.page.waitForFunction(
       () =>

packages/design-system/src/css/style.css

@@ -566,7 +566,7 @@ body {
   max-height: -webkit-fill-available;
   min-width: -webkit-fill-available;
   max-width: -webkit-fill-available;
-  font-family: Arial, sans-serif;
+  font-family: Inter, Arial, sans-serif;
 }
 
 .comfy-multiline-input {
@@ -880,7 +880,6 @@ body {
   align-items: center;
   color: var(--descrip-text);
   background-color: var(--comfy-menu-bg);
-  font-family: sans-serif;
   padding: 10px;
   border-radius: 0 8px 8px;
   box-shadow: 3px 3px 8px rgb(0 0 0 / 0.4);
@@ -978,7 +977,6 @@ span.drag-handle {
   margin-top: -0.4em;
   margin-left: -0.2em;
   font-size: 12px;
-  font-family: sans-serif;
   letter-spacing: 2px;
   color: var(--drag-text);
   text-shadow: 1px 0 1px black;
@@ -1038,7 +1036,6 @@ button.comfy-queue-btn {
 .comfy-modal.comfy-settings,
 .comfy-modal.comfy-manage-templates {
   text-align: center;
-  font-family: sans-serif;
   color: var(--descrip-text);
   z-index: 99;
 }
@@ -1102,7 +1099,6 @@ button.comfy-queue-btn {
 
 .graphdialog .name {
   font-size: 14px;
-  font-family: sans-serif;
   color: var(--descrip-text);
 }
 
@@ -1142,7 +1138,6 @@ dialog::backdrop {
 }
 
 .comfy-dialog.comfy-modal {
-  font-family: Arial, sans-serif;
   border-color: var(--bg-color);
   box-shadow: none;
   border: 2px solid var(--border-color);
@@ -1172,7 +1167,6 @@ dialog::backdrop {
 
 .litegraph .dialog {
   z-index: 1;
-  font-family: Arial, sans-serif;
 }
 
 .litegraph .litemenu-entry.has_submenu {
@@ -1337,7 +1331,6 @@ audio.comfy-audio.empty-audio-widget {
   .maskEditor_sidePanelTitle {
     text-align: center;
     font-size: 15px;
-    font-family: sans-serif;
     color: var(--descrip-text);
     margin-top: 10px;
   }
@@ -1445,7 +1438,6 @@ audio.comfy-audio.empty-audio-widget {
     background: rgb(0 0 0 / 0.2);
     border: 1px solid var(--border-color);
     color: var(--input-text);
-    font-family: sans-serif;
     font-size: 15px;
     pointer-events: auto;
     transition: background-color 0.1s;
@@ -1560,7 +1552,6 @@ audio.comfy-audio.empty-audio-widget {
     border: 1px solid var(--p-form-field-border-color);
     border-radius: 10px;
     color: var(--input-text);
-    font-family: sans-serif;
     pointer-events: auto;
     transition: 0.1s;
     width: 60px;
@@ -1576,7 +1567,6 @@ audio.comfy-audio.empty-audio-widget {
     border: 1px solid var(--p-form-field-border-color);
     border-radius: 10px;
     color: var(--input-text);
-    font-family: sans-serif;
     pointer-events: auto;
     transition: 0.1s;
     width: 60px;
@@ -1764,7 +1754,6 @@ audio.comfy-audio.empty-audio-widget {
   .maskEditor_sidePanelSubTitle {
     text-align: left;
     font-size: 12px;
-    font-family: sans-serif;
     color: var(--descrip-text);
   }
 

src/components/graph/NodeTooltip.vue

@@ -138,7 +138,6 @@ useEventListener(window, 'click', hideTooltip)
   border-radius: 5px;
   box-shadow: 0 0 5px rgb(0 0 0 / 0.4);
   color: var(--input-text);
-  font-family: sans-serif;
   left: 0;
   max-width: 30vw;
   padding: 4px 8px;

src/components/node/NodePreview.vue

@@ -200,7 +200,6 @@ const truncateDefaultValue = (value: any, charLimit: number = 32): string => {
 }
 
 ._sb_node_preview {
-  font-family: 'Open Sans', sans-serif;
   color: var(--descrip-text);
   border: 1px solid var(--descrip-text);
   min-width: 300px;

src/components/sidebar/tabs/modelLibrary/ModelPreview.vue

@@ -49,7 +49,6 @@ const modelDef = props.modelDef
 <style scoped>
 .model_preview {
   background-color: var(--comfy-menu-bg);
-  font-family: 'Open Sans', sans-serif;
   color: var(--descrip-text);
   border: 1px solid var(--descrip-text);
   min-width: 300px;

src/extensions/core/groupNodeManage.css

@@ -2,7 +2,6 @@
   background: var(--bg-color);
   color: var(--fg-color);
   padding: 0;
-  font-family: Arial, Helvetica, sans-serif;
   border-color: black;
   margin: 20vh auto;
   max-height: 60vh;

src/lib/litegraph/public/css/litegraph.css

@@ -6,15 +6,13 @@
   -moz-user-select: none;
   -webkit-user-select: none;
   outline: none;
-  font-family: Tahoma, sans-serif;
 }
 
 .lgraphcanvas * {
   box-sizing: border-box;
 }
 
 .litegraph.litecontextmenu {
-  font-family: Tahoma, sans-serif;
   position: fixed;
   top: 100px;
   left: 100px;
@@ -48,7 +46,6 @@
 }
 
 .litegraph .litemenubar ul {
-  font-family: Tahoma, sans-serif;
   margin: 0;
   padding: 0;
 }
@@ -165,7 +162,6 @@
 }
 
 .litegraph.litesearchbox {
-  font-family: Tahoma, sans-serif;
   position: absolute;
   background-color: rgba(0, 0, 0, 0.5);
   padding-top: 4px;
@@ -198,7 +194,6 @@
 }
 
 .litegraph.lite-search-item {
-  font-family: Tahoma, sans-serif;
   background-color: rgba(0, 0, 0, 0.5);
   color: white;
   padding-top: 2px;
@@ -302,7 +297,6 @@
 
 .litegraph .dialog .dialog-header .dialog-title {
   font: 1rem;
-  font-family: Inter, Arial, sans-serif;
   margin: 4px;
   padding: 4px 10px;
   display: inline-block;

src/lib/litegraph/src/LiteGraphGlobal.ts

@@ -59,16 +59,16 @@ export class LiteGraphGlobal {
   NODE_DEFAULT_SHAPE = RenderShape.ROUND
   NODE_BOX_OUTLINE_COLOR = '#FFF'
   NODE_ERROR_COLOUR = '#E00'
-  NODE_FONT = 'Arial'
+  NODE_FONT = 'Inter'
   NODE_DEFAULT_BYPASS_COLOR = '#FF00FF'
   NODE_OPACITY = 0.9
 
-  DEFAULT_FONT = 'Arial'
+  DEFAULT_FONT = 'Inter'
   DEFAULT_SHADOW_COLOR = 'rgba(0,0,0,0.5)'
 
   DEFAULT_GROUP_FONT = 24
   DEFAULT_GROUP_FONT_SIZE?: any
-  GROUP_FONT = 'Arial'
+  GROUP_FONT = 'Inter'
 
   WIDGET_BGCOLOR = '#222'
   WIDGET_OUTLINE_COLOR = '#666'

src/lib/litegraph/src/canvas/InputIndicators.ts

@@ -23,7 +23,7 @@ export class InputIndicators implements Disposable {
   colour1 = '#ff5f00'
   colour2 = '#00ff7c'
   colour3 = '#dea7ff'
-  fontString = 'bold 12px Arial'
+  fontString = 'bold 12px Inter'
   // #endregion
 
   // #region state

src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts

@@ -353,7 +353,7 @@ export abstract class SubgraphIONodeBase<
     editorAlpha?: number
   ): void {
     ctx.fillStyle = '#AAA'
-    ctx.font = '12px Arial'
+    ctx.font = '12px Inter'
     ctx.textBaseline = 'middle'
 
     for (const slot of this.allSlots) {

src/platform/updates/components/ReleaseNotificationToast.vue

@@ -216,15 +216,13 @@ onMounted(async () => {
 .toast-title {
   color: white;
   font-size: 14px;
-  font-family: 'Satoshi', sans-serif;
   font-weight: 500;
   line-height: 18.2px;
 }
 
 .toast-version-badge {
   color: #a0a1a2;
   font-size: 12px;
-  font-family: 'Satoshi', sans-serif;
   font-weight: 500;
   line-height: 15.6px;
 }
@@ -253,7 +251,6 @@ onMounted(async () => {
 .learn-more-link {
   color: #60a5fa;
   font-size: 12px;
-  font-family: 'Inter', sans-serif;
   font-weight: 500;
   line-height: 15.6px;
   text-decoration: none;
@@ -279,7 +276,6 @@ onMounted(async () => {
   border: none;
   color: #aeaeb2;
   font-size: 12px;
-  font-family: 'Inter', sans-serif;
   font-weight: 500;
   cursor: pointer;
 }
@@ -297,7 +293,6 @@ onMounted(async () => {
   border: none;
   color: black;
   font-size: 12px;
-  font-family: 'Inter', sans-serif;
   font-weight: 500;
   cursor: pointer;
 }

src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts

@@ -212,7 +212,7 @@ const renderPreview = (
     ctx.roundRect(x, y, sz, sz, [4])
     ctx.fill()
     ctx.fillStyle = textFill
-    ctx.font = '12px Arial'
+    ctx.font = '12px Inter'
     ctx.textAlign = 'center'
     ctx.fillText(text, x + 15, y + 20)
 

tests-ui/tests/litegraph/core/__snapshots__/litegraph.test.ts.snap

@@ -20,7 +20,7 @@ LiteGraphGlobal {
   },
   "ContextMenu": [Function],
   "CurveEditor": [Function],
-  "DEFAULT_FONT": "Arial",
+  "DEFAULT_FONT": "Inter",
   "DEFAULT_GROUP_FONT": 24,
   "DEFAULT_GROUP_FONT_SIZE": undefined,
   "DEFAULT_POSITION": [
@@ -33,7 +33,7 @@ LiteGraphGlobal {
   "EVENT": -1,
   "EVENT_LINK_COLOR": "#A86",
   "GRID_SHAPE": 6,
-  "GROUP_FONT": "Arial",
+  "GROUP_FONT": "Inter",
   "Globals": {},
   "HIDDEN_LINK": -1,
   "INPUT": 1,
@@ -65,7 +65,7 @@ LiteGraphGlobal {
   "NODE_DEFAULT_COLOR": "#333",
   "NODE_DEFAULT_SHAPE": 2,
   "NODE_ERROR_COLOUR": "#E00",
-  "NODE_FONT": "Arial",
+  "NODE_FONT": "Inter",
   "NODE_MIN_WIDTH": 50,
   "NODE_MODES": [
     "Always",