diff --git a/javascript/amethyst-nightfall.css b/javascript/amethyst-nightfall.css
index 902ecf56b..ec69db97a 100644
--- a/javascript/amethyst-nightfall.css
+++ b/javascript/amethyst-nightfall.css
@@ -1,6 +1,6 @@
 /* generic html tags */
 :root {
-  --font: "Source Sans Pro", 'ui-sans-serif', 'system-ui', sans-serif;
+  --font: "Source Sans Pro", 'ui-sans-serif', 'system-ui', sans-serif, 'NotoSans';
   --font-size: 16px;
   --highlight-color: #8a3df6; /* Purple color */
   --inactive-color: #404040; /* Darker shade of gray */
diff --git a/javascript/base.css b/javascript/base.css
index 18ff4d42f..4aafcee4d 100644
--- a/javascript/base.css
+++ b/javascript/base.css
@@ -1,3 +1,5 @@
+@font-face { font-family: 'NotoSans'; font-display: swap; font-style: normal; font-weight: 100; src: local('NotoSans'), url('notosans-nerdfont-regular.ttf') }
+
 /* toolbutton */
 .gradio-button.tool { max-width: min-content; min-width: min-content !important; align-self: end; font-size: 1.4em; color: var(--body-text-color) !important; }
 
@@ -26,7 +28,7 @@
 
 /* fullpage image viewer */
 #lightboxModal{ display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(20, 20, 20, 0.75); backdrop-filter: blur(6px);
-  user-select: none; -webkit-user-select: none; flex-direction: row; }
+  user-select: none; -webkit-user-select: none; flex-direction: row; font-family: 'NotoSans'; }
 .modalControls { display: flex; justify-content: space-evenly; background-color: transparent; position: absolute; width: 99%; z-index: 1; }
 .modalControls:hover { background-color: #50505050; }
 .modalControls span { color: white; font-size: 2em; font-weight: bold; cursor: pointer; filter: grayscale(100%); }
diff --git a/javascript/emerald-paradise.css b/javascript/emerald-paradise.css
index 727d3a4ae..5b3bc419f 100644
--- a/javascript/emerald-paradise.css
+++ b/javascript/emerald-paradise.css
@@ -1,6 +1,6 @@
 /* generic html tags */
 :root, .light, .dark {
-  --font: 'system-ui', 'ui-sans-serif', 'system-ui', "Roboto", sans-serif;
+  --font: 'system-ui', 'ui-sans-serif', 'system-ui', "Roboto", sans-serif, 'NotoSans';
   --font-mono: 'ui-monospace', 'Consolas', monospace;
   --font-size: 16px;
   --primary-100: #1e2223; /* bg color*/
diff --git a/javascript/invoked.css b/javascript/invoked.css
index 1e9693513..72e78d31a 100644
--- a/javascript/invoked.css
+++ b/javascript/invoked.css
@@ -1,6 +1,6 @@
 /* generic html tags */
 :root, .light, .dark {
-  --font: 'system-ui', 'ui-sans-serif', 'system-ui', "Roboto", sans-serif;
+  --font: 'system-ui', 'ui-sans-serif', 'system-ui', "Roboto", sans-serif, 'NotoSans';
   --font-mono: 'ui-monospace', 'Consolas', monospace;
   --font-size: 16px;
   --primary-100: #2b303b;
diff --git a/javascript/midnight-barbie.css b/javascript/midnight-barbie.css
index fb18b5d57..ea78e5cab 100644
--- a/javascript/midnight-barbie.css
+++ b/javascript/midnight-barbie.css
@@ -1,6 +1,6 @@
 /* generic html tags */
 :root, .light, .dark {
-  --font: "Source Sans Pro", 'ui-sans-serif', 'system-ui', "Roboto", sans-serif;
+  --font: "Source Sans Pro", 'ui-sans-serif', 'system-ui', "Roboto", sans-serif, 'NotoSans';
   --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
   --font-size: 14px;
   --highlight-color: #ff00f2;
diff --git a/javascript/orchid-dreams.css b/javascript/orchid-dreams.css
index 508fc6d22..c290240c1 100644
--- a/javascript/orchid-dreams.css
+++ b/javascript/orchid-dreams.css
@@ -1,6 +1,6 @@
 /* generic html tags */
 :root, .light, .dark {
-  --font: 'system-ui', 'ui-sans-serif', 'system-ui', "Roboto", sans-serif;
+  --font: 'system-ui', 'ui-sans-serif', 'system-ui', "Roboto", sans-serif, 'NotoSans';
   --font-mono: 'ui-monospace', 'Consolas', monospace;
   --font-size: 16px;
   --primary-100: #2a2a34; /* bg color*/
diff --git a/javascript/sdnext.css b/javascript/sdnext.css
index f500bbfa7..8d9e57ef9 100644
--- a/javascript/sdnext.css
+++ b/javascript/sdnext.css
@@ -159,7 +159,7 @@ div#extras_scale_to_tab div.form{ flex-direction: row; }
 
 /* fullpage image viewer */
 #lightboxModal{ display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(20, 20, 20, 0.75); backdrop-filter: blur(6px);
-  user-select: none; -webkit-user-select: none; flex-direction: row; }
+  user-select: none; -webkit-user-select: none; flex-direction: row; font-family: 'NotoSans';}
 .modalControls { display: flex; justify-content: space-evenly; background-color: transparent; position: absolute; width: 99%; z-index: 1; }
 .modalControls:hover { background-color: #50505050; }
 .modalControls span { color: white; font-size: 2em !important; font-weight: bold; cursor: pointer; filter: grayscale(100%); }
diff --git a/javascript/timeless-beige.css b/javascript/timeless-beige.css
index f472d1cfa..fbd9ec1a7 100644
--- a/javascript/timeless-beige.css
+++ b/javascript/timeless-beige.css
@@ -1,6 +1,6 @@
 /* generic html tags */
 :root, .light, .dark {
-  --font: 'system-ui', 'ui-sans-serif', 'system-ui', "Roboto", sans-serif;
+  --font: 'system-ui', 'ui-sans-serif', 'system-ui', "Roboto", sans-serif, 'NotoSans';
   --font-mono: 'ui-monospace', 'Consolas', monospace;
   --font-size: 16px;
   --primary-100: #212226; /* bg color*/