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

Author: DrJKL

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/main.ts

@@ -73,10 +73,7 @@ app
         cssLayer: {
           name: 'primevue',
           order: 'theme, base, primevue'
-        },
-        // This is a workaround for the issue with the dark mode selector
-        // https://github.com/primefaces/primevue/issues/5515
-        darkModeSelector: '.dark-theme, :root:has(.dark-theme)'
+        }
       }
     }
   })

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;
 }