diff --git a/doc/installation/StyledModeDoc.vue b/doc/installation/StyledModeDoc.vue
index 50cd3160b..1aa0c1eec 100644
--- a/doc/installation/StyledModeDoc.vue
+++ b/doc/installation/StyledModeDoc.vue
@@ -4,9 +4,7 @@
             Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the
             <NuxtLink to="/theming/#themes">Themes</NuxtLink> section for the complete list of available themes to choose from.
         </p>
-        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-        <p>Each PrimeVue theme has its own font family so it is suggested to apply it to your application as well for a unified look.</p>
-        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
     </DocSectionText>
 </template>
 
@@ -14,14 +12,9 @@
 export default {
     data() {
         return {
-            code1: {
+            code: {
                 basic: `//theme
 import "primevue/resources/themes/lara-light-indigo/theme.css";`
-            },
-            code2: {
-                basic: `body {
-    font-family: var(--font-family);
-} `
             }
         };
     }
diff --git a/nuxt.config.js b/nuxt.config.js
index d845e949a..88a55db7e 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -42,10 +42,6 @@ export default defineNuxtConfig({
                     rel: 'stylesheet',
                     href: baseUrl + 'themes/lara-light-blue/theme.css'
                 },
-                {
-                    rel: 'stylesheet',
-                    href: 'https://fonts.cdnfonts.com/css/dm-sans'
-                },
                 { rel: 'icon', href: baseUrl + 'favicon.ico' }
             ],
             script: [
diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index eac26ee43..549d7c603 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a:#1e1e1e;
   --surface-b:#121212;
   --surface-c:rgba(255, 255, 255, 0.03);
@@ -9,7 +11,6 @@
   --text-color-secondary:rgba(255, 255, 255, 0.6);
   --primary-color:#64B5F6;
   --primary-color-text:#212529;
-  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #121212;
   --surface-50: #2a2a2a;
   --surface-100: #414141;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 400b5bca0..377a0e943 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a:#1e1e1e;
   --surface-b:#121212;
   --surface-c:rgba(255, 255, 255, 0.03);
@@ -9,7 +11,6 @@
   --text-color-secondary:rgba(255, 255, 255, 0.6);
   --primary-color:#81C784;
   --primary-color-text:#212529;
-  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #121212;
   --surface-50: #2a2a2a;
   --surface-100: #414141;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 7d6fe6c07..052faf607 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a:#1e1e1e;
   --surface-b:#121212;
   --surface-c:rgba(255, 255, 255, 0.03);
@@ -9,7 +11,6 @@
   --text-color-secondary:rgba(255, 255, 255, 0.6);
   --primary-color:#FFD54F;
   --primary-color-text:#212529;
-  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #121212;
   --surface-50: #2a2a2a;
   --surface-100: #414141;
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 0fbcd29f1..5e359a65d 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a:#1e1e1e;
   --surface-b:#121212;
   --surface-c:rgba(255, 255, 255, 0.03);
@@ -9,7 +11,6 @@
   --text-color-secondary:rgba(255, 255, 255, 0.6);
   --primary-color:#BA68C8;
   --primary-color-text:#ffffff;
-  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #121212;
   --surface-50: #2a2a2a;
   --surface-100: #414141;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index b6fe0c5a0..ab9b5c77d 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a:#2a323d;
   --surface-b:#20262e;
   --surface-c:rgba(255, 255, 255, 0.04);
@@ -9,7 +11,6 @@
   --text-color-secondary:rgba(255, 255, 255, 0.6);
   --primary-color:#8dd0ff;
   --primary-color-text:#151515;
-  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #20262e;
   --surface-50: #363c43;
   --surface-100: #4d5158;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index c3084b567..f09a1917a 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a:#2a323d;
   --surface-b:#20262e;
   --surface-c:rgba(255, 255, 255, 0.04);
@@ -9,7 +11,6 @@
   --text-color-secondary:rgba(255, 255, 255, 0.6);
   --primary-color:#c298d8;
   --primary-color-text:#151515;
-  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #20262e;
   --surface-50: #363c43;
   --surface-100: #4d5158;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 5c4cc8276..58ab37008 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a:#ffffff;
   --surface-b:#efefef;
   --surface-c:#e9ecef;
@@ -9,7 +11,6 @@
   --text-color-secondary:#6c757d;
   --primary-color:#007bff;
   --primary-color-text:#ffffff;
-  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #ffffff;
   --surface-50: #f9fafb;
   --surface-100: #f8f9fa;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index bcbc7dbd2..7987615be 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a:#ffffff;
   --surface-b:#efefef;
   --surface-c:#e9ecef;
@@ -9,7 +11,6 @@
   --text-color-secondary:#6c757d;
   --primary-color:#883cae;
   --primary-color-text:#ffffff;
-  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #ffffff;
   --surface-50: #f9fafb;
   --surface-100: #f8f9fa;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index b6cfe5587..81560816f 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a:#ffffff;
   --surface-b:#faf9f8;
   --surface-c:#f3f2f1;
@@ -9,7 +11,6 @@
   --text-color-secondary:#605e5c;
   --primary-color:#0078d4;
   --primary-color-text:#ffffff;
-  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #ffffff;
   --surface-50: #f3f2f1;
   --surface-100: #e1dfdd;
diff --git a/public/themes/lara-dark-blue/fonts/Inter-italic.var.woff2 b/public/themes/lara-dark-blue/fonts/Inter-italic.var.woff2
new file mode 100644
index 000000000..b826d5af8
Binary files /dev/null and b/public/themes/lara-dark-blue/fonts/Inter-italic.var.woff2 differ
diff --git a/public/themes/lara-dark-blue/fonts/Inter-roman.var.woff2 b/public/themes/lara-dark-blue/fonts/Inter-roman.var.woff2
new file mode 100644
index 000000000..6a256a068
Binary files /dev/null and b/public/themes/lara-dark-blue/fonts/Inter-roman.var.woff2 differ
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index b3ca2dcf0..d1e15636e 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -1,4 +1,8 @@
 :root {
+  font-family: Inter var, sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family:Inter var, sans-serif;
   --surface-a:#071426;
   --surface-b:#040d19;
   --surface-c:rgba(255, 255, 255, 0.03);
@@ -9,7 +13,6 @@
   --text-color-secondary:rgba(255, 255, 255, 0.6);
   --primary-color:#93C5FD;
   --primary-color-text:#1c2127;
-  --font-family:'DM Sans', sans-serif;
   --surface-0: #040d19;
   --surface-50: #1d2530;
   --surface-100: #363d47;
@@ -47,12 +50,28 @@
   color-scheme: dark;
 }
 
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("./fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
+}
 * {
   box-sizing: border-box;
 }
 
 .p-component {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   font-weight: normal;
 }
@@ -85,7 +104,7 @@
 
 .p-link {
   font-size: 1rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   border-radius: 6px;
 }
 .p-link:focus {
@@ -265,7 +284,7 @@
   padding: 0.375rem 0;
 }
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.87);
   padding: 0;
@@ -728,7 +747,7 @@
   padding: 0.375rem 0;
 }
 .p-chips .p-chips-multiple-container .p-chips-input-token input {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.87);
   padding: 0;
@@ -1093,7 +1112,7 @@
 }
 
 .p-inputtext {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.87);
   background: #040d19;
@@ -5900,7 +5919,7 @@
 }
 .p-terminal .p-terminal-input {
   font-size: 1rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
 }
 
 .p-button-label {
diff --git a/public/themes/lara-dark-indigo/fonts/Inter-italic.var.woff2 b/public/themes/lara-dark-indigo/fonts/Inter-italic.var.woff2
new file mode 100644
index 000000000..b826d5af8
Binary files /dev/null and b/public/themes/lara-dark-indigo/fonts/Inter-italic.var.woff2 differ
diff --git a/public/themes/lara-dark-indigo/fonts/Inter-roman.var.woff2 b/public/themes/lara-dark-indigo/fonts/Inter-roman.var.woff2
new file mode 100644
index 000000000..6a256a068
Binary files /dev/null and b/public/themes/lara-dark-indigo/fonts/Inter-roman.var.woff2 differ
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index 102417283..3499d51ae 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -1,4 +1,8 @@
 :root {
+  font-family: Inter var, sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family:Inter var, sans-serif;
   --surface-a:#071426;
   --surface-b:#040d19;
   --surface-c:rgba(255, 255, 255, 0.03);
@@ -9,7 +13,6 @@
   --text-color-secondary:rgba(255, 255, 255, 0.6);
   --primary-color:#A5B4FC;
   --primary-color-text:#1c2127;
-  --font-family:'DM Sans', sans-serif;
   --surface-0: #040d19;
   --surface-50: #1d2530;
   --surface-100: #363d47;
@@ -47,12 +50,28 @@
   color-scheme: dark;
 }
 
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("./fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
+}
 * {
   box-sizing: border-box;
 }
 
 .p-component {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   font-weight: normal;
 }
@@ -85,7 +104,7 @@
 
 .p-link {
   font-size: 1rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   border-radius: 6px;
 }
 .p-link:focus {
@@ -265,7 +284,7 @@
   padding: 0.375rem 0;
 }
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.87);
   padding: 0;
@@ -728,7 +747,7 @@
   padding: 0.375rem 0;
 }
 .p-chips .p-chips-multiple-container .p-chips-input-token input {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.87);
   padding: 0;
@@ -1093,7 +1112,7 @@
 }
 
 .p-inputtext {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.87);
   background: #040d19;
@@ -5900,7 +5919,7 @@
 }
 .p-terminal .p-terminal-input {
   font-size: 1rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
 }
 
 .p-button-label {
diff --git a/public/themes/lara-dark-purple/fonts/Inter-italic.var.woff2 b/public/themes/lara-dark-purple/fonts/Inter-italic.var.woff2
new file mode 100644
index 000000000..b826d5af8
Binary files /dev/null and b/public/themes/lara-dark-purple/fonts/Inter-italic.var.woff2 differ
diff --git a/public/themes/lara-dark-purple/fonts/Inter-roman.var.woff2 b/public/themes/lara-dark-purple/fonts/Inter-roman.var.woff2
new file mode 100644
index 000000000..6a256a068
Binary files /dev/null and b/public/themes/lara-dark-purple/fonts/Inter-roman.var.woff2 differ
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
index 27ba9b821..f870a2469 100644
--- a/public/themes/lara-dark-purple/theme.css
+++ b/public/themes/lara-dark-purple/theme.css
@@ -1,4 +1,8 @@
 :root {
+  font-family: Inter var, sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family:Inter var, sans-serif;
   --surface-a:#071426;
   --surface-b:#040d19;
   --surface-c:rgba(255, 255, 255, 0.03);
@@ -9,7 +13,6 @@
   --text-color-secondary:rgba(255, 255, 255, 0.6);
   --primary-color:#C4B5FD;
   --primary-color-text:#1c2127;
-  --font-family:'DM Sans', sans-serif;
   --surface-0: #040d19;
   --surface-50: #1d2530;
   --surface-100: #363d47;
@@ -47,12 +50,28 @@
   color-scheme: dark;
 }
 
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("./fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
+}
 * {
   box-sizing: border-box;
 }
 
 .p-component {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   font-weight: normal;
 }
@@ -85,7 +104,7 @@
 
 .p-link {
   font-size: 1rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   border-radius: 6px;
 }
 .p-link:focus {
@@ -265,7 +284,7 @@
   padding: 0.375rem 0;
 }
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.87);
   padding: 0;
@@ -728,7 +747,7 @@
   padding: 0.375rem 0;
 }
 .p-chips .p-chips-multiple-container .p-chips-input-token input {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.87);
   padding: 0;
@@ -1093,7 +1112,7 @@
 }
 
 .p-inputtext {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.87);
   background: #040d19;
@@ -5900,7 +5919,7 @@
 }
 .p-terminal .p-terminal-input {
   font-size: 1rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
 }
 
 .p-button-label {
diff --git a/public/themes/lara-dark-teal/fonts/Inter-italic.var.woff2 b/public/themes/lara-dark-teal/fonts/Inter-italic.var.woff2
new file mode 100644
index 000000000..b826d5af8
Binary files /dev/null and b/public/themes/lara-dark-teal/fonts/Inter-italic.var.woff2 differ
diff --git a/public/themes/lara-dark-teal/fonts/Inter-roman.var.woff2 b/public/themes/lara-dark-teal/fonts/Inter-roman.var.woff2
new file mode 100644
index 000000000..6a256a068
Binary files /dev/null and b/public/themes/lara-dark-teal/fonts/Inter-roman.var.woff2 differ
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index 16514c0fa..7684f0d06 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -1,4 +1,8 @@
 :root {
+  font-family: Inter var, sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family:Inter var, sans-serif;
   --surface-a:#071426;
   --surface-b:#040d19;
   --surface-c:rgba(255, 255, 255, 0.03);
@@ -9,7 +13,6 @@
   --text-color-secondary:rgba(255, 255, 255, 0.6);
   --primary-color:#5EEAD4;
   --primary-color-text:#1c2127;
-  --font-family:'DM Sans', sans-serif;
   --surface-0: #040d19;
   --surface-50: #1d2530;
   --surface-100: #363d47;
@@ -47,12 +50,28 @@
   color-scheme: dark;
 }
 
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("./fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
+}
 * {
   box-sizing: border-box;
 }
 
 .p-component {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   font-weight: normal;
 }
@@ -85,7 +104,7 @@
 
 .p-link {
   font-size: 1rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   border-radius: 6px;
 }
 .p-link:focus {
@@ -265,7 +284,7 @@
   padding: 0.375rem 0;
 }
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.87);
   padding: 0;
@@ -728,7 +747,7 @@
   padding: 0.375rem 0;
 }
 .p-chips .p-chips-multiple-container .p-chips-input-token input {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.87);
   padding: 0;
@@ -1093,7 +1112,7 @@
 }
 
 .p-inputtext {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.87);
   background: #040d19;
@@ -5900,7 +5919,7 @@
 }
 .p-terminal .p-terminal-input {
   font-size: 1rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
 }
 
 .p-button-label {
diff --git a/public/themes/lara-light-blue/fonts/Inter-italic.var.woff2 b/public/themes/lara-light-blue/fonts/Inter-italic.var.woff2
new file mode 100644
index 000000000..b826d5af8
Binary files /dev/null and b/public/themes/lara-light-blue/fonts/Inter-italic.var.woff2 differ
diff --git a/public/themes/lara-light-blue/fonts/Inter-roman.var.woff2 b/public/themes/lara-light-blue/fonts/Inter-roman.var.woff2
new file mode 100644
index 000000000..6a256a068
Binary files /dev/null and b/public/themes/lara-light-blue/fonts/Inter-roman.var.woff2 differ
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index db93241a7..64bcd0860 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -1,4 +1,8 @@
 :root {
+  font-family: Inter var, sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family:Inter var, sans-serif;
   --surface-a:#ffffff;
   --surface-b:#f8f9fa;
   --surface-c:#e9ecef;
@@ -9,7 +13,6 @@
   --text-color-secondary:#6c757d;
   --primary-color:#3B82F6;
   --primary-color-text:#ffffff;
-  --font-family:'DM Sans', sans-serif;
   --surface-0: #ffffff;
   --surface-50: #FAFAFA;
   --surface-100: #F5F5F5;
@@ -47,12 +50,28 @@
   color-scheme: light;
 }
 
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("./fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
+}
 * {
   box-sizing: border-box;
 }
 
 .p-component {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   font-weight: normal;
 }
@@ -85,7 +104,7 @@
 
 .p-link {
   font-size: 1rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   border-radius: 6px;
 }
 .p-link:focus {
@@ -265,7 +284,7 @@
   padding: 0.375rem 0;
 }
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: #495057;
   padding: 0;
@@ -728,7 +747,7 @@
   padding: 0.375rem 0;
 }
 .p-chips .p-chips-multiple-container .p-chips-input-token input {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: #495057;
   padding: 0;
@@ -1093,7 +1112,7 @@
 }
 
 .p-inputtext {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: #495057;
   background: #ffffff;
@@ -5900,7 +5919,7 @@
 }
 .p-terminal .p-terminal-input {
   font-size: 1rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
 }
 
 .p-button-label {
diff --git a/public/themes/lara-light-indigo/fonts/Inter-italic.var.woff2 b/public/themes/lara-light-indigo/fonts/Inter-italic.var.woff2
new file mode 100644
index 000000000..b826d5af8
Binary files /dev/null and b/public/themes/lara-light-indigo/fonts/Inter-italic.var.woff2 differ
diff --git a/public/themes/lara-light-indigo/fonts/Inter-roman.var.woff2 b/public/themes/lara-light-indigo/fonts/Inter-roman.var.woff2
new file mode 100644
index 000000000..6a256a068
Binary files /dev/null and b/public/themes/lara-light-indigo/fonts/Inter-roman.var.woff2 differ
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index 0802001ba..b8f068d44 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -1,4 +1,8 @@
 :root {
+  font-family: Inter var, sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family:Inter var, sans-serif;
   --surface-a:#ffffff;
   --surface-b:#f8f9fa;
   --surface-c:#e9ecef;
@@ -9,7 +13,6 @@
   --text-color-secondary:#6c757d;
   --primary-color:#6366F1;
   --primary-color-text:#ffffff;
-  --font-family:'DM Sans', sans-serif;
   --surface-0: #ffffff;
   --surface-50: #FAFAFA;
   --surface-100: #F5F5F5;
@@ -47,12 +50,28 @@
   color-scheme: light;
 }
 
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("./fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
+}
 * {
   box-sizing: border-box;
 }
 
 .p-component {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   font-weight: normal;
 }
@@ -85,7 +104,7 @@
 
 .p-link {
   font-size: 1rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   border-radius: 6px;
 }
 .p-link:focus {
@@ -265,7 +284,7 @@
   padding: 0.375rem 0;
 }
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: #495057;
   padding: 0;
@@ -728,7 +747,7 @@
   padding: 0.375rem 0;
 }
 .p-chips .p-chips-multiple-container .p-chips-input-token input {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: #495057;
   padding: 0;
@@ -1093,7 +1112,7 @@
 }
 
 .p-inputtext {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: #495057;
   background: #ffffff;
@@ -5900,7 +5919,7 @@
 }
 .p-terminal .p-terminal-input {
   font-size: 1rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
 }
 
 .p-button-label {
diff --git a/public/themes/lara-light-purple/fonts/Inter-italic.var.woff2 b/public/themes/lara-light-purple/fonts/Inter-italic.var.woff2
new file mode 100644
index 000000000..b826d5af8
Binary files /dev/null and b/public/themes/lara-light-purple/fonts/Inter-italic.var.woff2 differ
diff --git a/public/themes/lara-light-purple/fonts/Inter-roman.var.woff2 b/public/themes/lara-light-purple/fonts/Inter-roman.var.woff2
new file mode 100644
index 000000000..6a256a068
Binary files /dev/null and b/public/themes/lara-light-purple/fonts/Inter-roman.var.woff2 differ
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index 57d827fb8..12e7d74eb 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -1,4 +1,8 @@
 :root {
+  font-family: Inter var, sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family:Inter var, sans-serif;
   --surface-a:#ffffff;
   --surface-b:#f8f9fa;
   --surface-c:#e9ecef;
@@ -9,7 +13,6 @@
   --text-color-secondary:#6c757d;
   --primary-color:#8B5CF6;
   --primary-color-text:#ffffff;
-  --font-family:'DM Sans', sans-serif;
   --surface-0: #ffffff;
   --surface-50: #FAFAFA;
   --surface-100: #F5F5F5;
@@ -47,12 +50,28 @@
   color-scheme: light;
 }
 
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("./fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
+}
 * {
   box-sizing: border-box;
 }
 
 .p-component {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   font-weight: normal;
 }
@@ -85,7 +104,7 @@
 
 .p-link {
   font-size: 1rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   border-radius: 6px;
 }
 .p-link:focus {
@@ -265,7 +284,7 @@
   padding: 0.375rem 0;
 }
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: #495057;
   padding: 0;
@@ -728,7 +747,7 @@
   padding: 0.375rem 0;
 }
 .p-chips .p-chips-multiple-container .p-chips-input-token input {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: #495057;
   padding: 0;
@@ -1093,7 +1112,7 @@
 }
 
 .p-inputtext {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: #495057;
   background: #ffffff;
@@ -5900,7 +5919,7 @@
 }
 .p-terminal .p-terminal-input {
   font-size: 1rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
 }
 
 .p-button-label {
diff --git a/public/themes/lara-light-teal/fonts/Inter-italic.var.woff2 b/public/themes/lara-light-teal/fonts/Inter-italic.var.woff2
new file mode 100644
index 000000000..b826d5af8
Binary files /dev/null and b/public/themes/lara-light-teal/fonts/Inter-italic.var.woff2 differ
diff --git a/public/themes/lara-light-teal/fonts/Inter-roman.var.woff2 b/public/themes/lara-light-teal/fonts/Inter-roman.var.woff2
new file mode 100644
index 000000000..6a256a068
Binary files /dev/null and b/public/themes/lara-light-teal/fonts/Inter-roman.var.woff2 differ
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index 33ac2b408..4a0869cd3 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -1,4 +1,8 @@
 :root {
+  font-family: Inter var, sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family:Inter var, sans-serif;
   --surface-a:#ffffff;
   --surface-b:#f8f9fa;
   --surface-c:#e9ecef;
@@ -9,7 +13,6 @@
   --text-color-secondary:#6c757d;
   --primary-color:#14B8A6;
   --primary-color-text:#ffffff;
-  --font-family:'DM Sans', sans-serif;
   --surface-0: #ffffff;
   --surface-50: #FAFAFA;
   --surface-100: #F5F5F5;
@@ -47,12 +50,28 @@
   color-scheme: light;
 }
 
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("./fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
+}
 * {
   box-sizing: border-box;
 }
 
 .p-component {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   font-weight: normal;
 }
@@ -85,7 +104,7 @@
 
 .p-link {
   font-size: 1rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   border-radius: 6px;
 }
 .p-link:focus {
@@ -265,7 +284,7 @@
   padding: 0.375rem 0;
 }
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: #495057;
   padding: 0;
@@ -728,7 +747,7 @@
   padding: 0.375rem 0;
 }
 .p-chips .p-chips-multiple-container .p-chips-input-token input {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: #495057;
   padding: 0;
@@ -1093,7 +1112,7 @@
 }
 
 .p-inputtext {
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
   font-size: 1rem;
   color: #495057;
   background: #ffffff;
@@ -5900,7 +5919,7 @@
 }
 .p-terminal .p-terminal-input {
   font-size: 1rem;
-  font-family: 'DM Sans', sans-serif;
+  font-family: "Inter var", sans-serif;
 }
 
 .p-button-label {
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index bd9dfbd14..462b41fb6 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a: #191919;
   --surface-b: #191919;
   --surface-c: #4c4c4c;
@@ -9,7 +11,6 @@
   --text-color-secondary: #888888;
   --primary-color: #FFE082;
   --primary-color-text: #212529;
-  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #191919;
   --surface-50: #303030;
   --surface-100: #474747;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 960192d75..f5555f9ac 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a: #191919;
   --surface-b: #191919;
   --surface-c: #4c4c4c;
@@ -9,7 +11,6 @@
   --text-color-secondary: #888888;
   --primary-color: #81D4FA;
   --primary-color-text: #212529;
-  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #191919;
   --surface-50: #303030;
   --surface-100: #474747;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 01137e082..b1b79c8e8 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a: #191919;
   --surface-b: #191919;
   --surface-c: #4c4c4c;
@@ -9,7 +11,6 @@
   --text-color-secondary: #888888;
   --primary-color: #C5E1A5;
   --primary-color-text: #212529;
-  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #191919;
   --surface-50: #303030;
   --surface-100: #474747;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 4b4e9a412..43cef90e2 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a: #191919;
   --surface-b: #191919;
   --surface-c: #4c4c4c;
@@ -9,7 +11,6 @@
   --text-color-secondary: #888888;
   --primary-color: #F48FB1;
   --primary-color-text: #212529;
-  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #191919;
   --surface-50: #303030;
   --surface-100: #474747;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index cb29423ba..75927ef54 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+  --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-a:#1e1e1e;
   --surface-b:#121212;
   --surface-c:hsla(0,0%,100%,.04);
@@ -9,7 +11,6 @@
   --text-color-secondary:rgba(255, 255, 255, 0.6);
   --primary-color:#CE93D8;
   --primary-color-text:#121212;
-  --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-0: #121212;
   --surface-50: #2a2a2a;
   --surface-100: #414141;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index ecabe03c7..0666436ab 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+  --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-a:#1e1e1e;
   --surface-b:#121212;
   --surface-c:hsla(0,0%,100%,.04);
@@ -9,7 +11,6 @@
   --text-color-secondary:rgba(255, 255, 255, 0.6);
   --primary-color:#9FA8DA;
   --primary-color-text:#121212;
-  --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-0: #121212;
   --surface-50: #2a2a2a;
   --surface-100: #414141;
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 7102f9c07..c2a345546 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+  --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-a:#ffffff;
   --surface-b:#fafafa;
   --surface-c:rgba(0,0,0,.04);
@@ -9,7 +11,6 @@
   --text-color-secondary:rgba(0, 0, 0, 0.6);
   --primary-color:#673AB7;
   --primary-color-text:#ffffff;
-  --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-0: #ffffff;
   --surface-50: #FAFAFA;
   --surface-100: #F5F5F5;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index bcc4f8dce..6f7212934 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+  --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-a:#ffffff;
   --surface-b:#fafafa;
   --surface-c:rgba(0,0,0,.04);
@@ -9,7 +11,6 @@
   --text-color-secondary:rgba(0, 0, 0, 0.6);
   --primary-color:#3F51B5;
   --primary-color-text:#ffffff;
-  --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-0: #ffffff;
   --surface-50: #FAFAFA;
   --surface-100: #F5F5F5;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 8ca80cc48..e86582373 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+  --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-a:#1e1e1e;
   --surface-b:#121212;
   --surface-c:hsla(0,0%,100%,.04);
@@ -9,7 +11,6 @@
   --text-color-secondary:rgba(255, 255, 255, 0.6);
   --primary-color:#CE93D8;
   --primary-color-text:#121212;
-  --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-0: #121212;
   --surface-50: #2a2a2a;
   --surface-100: #414141;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 466f03854..b03857356 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+  --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-a:#1e1e1e;
   --surface-b:#121212;
   --surface-c:hsla(0,0%,100%,.04);
@@ -9,7 +11,6 @@
   --text-color-secondary:rgba(255, 255, 255, 0.6);
   --primary-color:#9FA8DA;
   --primary-color-text:#121212;
-  --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-0: #121212;
   --surface-50: #2a2a2a;
   --surface-100: #414141;
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 553188962..7598cde61 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+  --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-a:#ffffff;
   --surface-b:#fafafa;
   --surface-c:rgba(0,0,0,.04);
@@ -9,7 +11,6 @@
   --text-color-secondary:rgba(0, 0, 0, 0.6);
   --primary-color:#673AB7;
   --primary-color-text:#ffffff;
-  --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-0: #ffffff;
   --surface-50: #FAFAFA;
   --surface-100: #F5F5F5;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 71bd852d7..5c08376c5 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+  --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-a:#ffffff;
   --surface-b:#fafafa;
   --surface-c:rgba(0,0,0,.04);
@@ -9,7 +11,6 @@
   --text-color-secondary:rgba(0, 0, 0, 0.6);
   --primary-color:#3F51B5;
   --primary-color-text:#ffffff;
-  --font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
   --surface-0: #ffffff;
   --surface-50: #FAFAFA;
   --surface-100: #F5F5F5;
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index 7241f3380..affb68019 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: Inter, sans-serif;
+  --font-family:Inter, sans-serif;
   --surface-a:#ffffff;
   --surface-b:#ECEFF4;
   --surface-c:#D8DEE9;
@@ -9,7 +11,6 @@
   --text-color-secondary:#81A1C1;
   --primary-color:#5E81AC;
   --primary-color-text:#ffffff;
-  --font-family:Inter, sans-serif;
   --surface-0: #ffffff;
   --surface-50: #edeef0;
   --surface-100: #dbdde1;
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index 6cf244c0c..61c5df40f 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a:#ffffff;
   --surface-b:#f2f4f8;
   --surface-c:#dde1e6;
@@ -9,7 +11,6 @@
   --text-color-secondary:#697077;
   --primary-color:#1174c0;
   --primary-color-text:#ffffff;
-  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #ffffff;
   --surface-50: #eff0f0;
   --surface-100: #dfe0e1;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 42512ca1f..0ace63372 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a: #ffffff;
   --surface-b: #f4f4f4;
   --surface-c: #eaeaea;
@@ -9,7 +11,6 @@
   --text-color-secondary: #848484;
   --primary-color: #007ad9;
   --primary-color-text: #ffffff;
-  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #ffffff;
   --surface-50: #eef1f2;
   --surface-100: #dde2e4;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 6f52f0b85..b74d4718c 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a: #ffffff;
   --surface-b: #f4f4f4;
   --surface-c: #eaeaea;
@@ -9,7 +11,6 @@
   --text-color-secondary: #848484;
   --primary-color: #007ad9;
   --primary-color-text: #ffffff;
-  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #ffffff;
   --surface-50: #eef1f2;
   --surface-100: #dde2e4;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index db7a289b7..f31a80d84 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a: #ffffff;
   --surface-b: #f4f4f4;
   --surface-c: #eaeaea;
@@ -9,7 +11,6 @@
   --text-color-secondary: #848484;
   --primary-color: #41b883;
   --primary-color-text: #ffffff;
-  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #ffffff;
   --surface-50: #eef1f2;
   --surface-100: #dde2e4;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 2c78e7285..244a16eb3 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a: #ffffff;
   --surface-b: #f4f4f4;
   --surface-c: #eaeaea;
@@ -9,7 +11,6 @@
   --text-color-secondary: #848484;
   --primary-color: #007ad9;
   --primary-color-text: #ffffff;
-  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #ffffff;
   --surface-50: #eef1f2;
   --surface-100: #dde2e4;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index b7d91262e..3c2380896 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a: #ffffff;
   --surface-b: #f4f4f4;
   --surface-c: #eaeaea;
@@ -9,7 +11,6 @@
   --text-color-secondary: #6c757d;
   --primary-color: #7B95A3;
   --primary-color-text: #ffffff;
-  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #ffffff;
   --surface-50: #eef1f2;
   --surface-100: #dde2e4;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index ef3b175ff..c1009e96c 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a:#ffffff;
   --surface-b:#f8f9fa;
   --surface-c:#e9ecef;
@@ -9,7 +11,6 @@
   --text-color-secondary:#6c757d;
   --primary-color:#2196F3;
   --primary-color-text:#ffffff;
-  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #ffffff;
   --surface-50: #FAFAFA;
   --surface-100: #F5F5F5;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 0553b350b..11b9f184a 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a:#ffffff;
   --surface-b:#f8f9fa;
   --surface-c:#e9ecef;
@@ -9,7 +11,6 @@
   --text-color-secondary:#6c757d;
   --primary-color:#4CAF50;
   --primary-color-text:#ffffff;
-  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #ffffff;
   --surface-50: #FAFAFA;
   --surface-100: #F5F5F5;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 8e6dff678..e5602d83a 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a:#ffffff;
   --surface-b:#f8f9fa;
   --surface-c:#e9ecef;
@@ -9,7 +11,6 @@
   --text-color-secondary:#6c757d;
   --primary-color:#FFC107;
   --primary-color-text:#212529;
-  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #ffffff;
   --surface-50: #FAFAFA;
   --surface-100: #F5F5F5;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 4338c053b..9cbc84046 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a:#ffffff;
   --surface-b:#f8f9fa;
   --surface-c:#e9ecef;
@@ -9,7 +11,6 @@
   --text-color-secondary:#6c757d;
   --primary-color:#9C27B0;
   --primary-color-text:#ffffff;
-  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #ffffff;
   --surface-50: #FAFAFA;
   --surface-100: #F5F5F5;
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index 3bc86812f..db6a4cb9e 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: Lato, Helvetica, sans-serif;
+  --font-family:Lato, Helvetica, sans-serif;
   --surface-a:#282936;
   --surface-b:#1d1e27;
   --surface-c:rgba(255, 255, 255, 0.03);
@@ -9,7 +11,6 @@
   --text-color-secondary:rgba(255, 255, 255, 0.6);
   --primary-color:#b19df7;
   --primary-color-text:#1c1d26;
-  --font-family:Lato, Helvetica, sans-serif;
   --surface-0: #1d1e27;
   --surface-50: #34343d;
   --surface-100: #4a4b52;
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index 51697a3eb..63e3cbcbd 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: Lato, Helvetica, sans-serif;
+  --font-family:Lato, Helvetica, sans-serif;
   --surface-a:#ffffff;
   --surface-b:#eff3f8;
   --surface-c:#f6f9fc;
@@ -9,7 +11,6 @@
   --text-color-secondary:#708da9;
   --primary-color:#7254f3;
   --primary-color-text:#ffffff;
-  --font-family:Lato, Helvetica, sans-serif;
   --surface-0: #ffffff;
   --surface-50: #f1f4f6;
   --surface-100: #e2e8ee;
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index 6e8fe9b51..e3f71fdbd 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  --font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
   --surface-a:#ffffff;
   --surface-b:#fafafa;
   --surface-c:#f4f4f5;
@@ -9,7 +11,6 @@
   --text-color-secondary:#71717A;
   --primary-color:#4F46E5;
   --primary-color-text:#ffffff;
-  --font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
   --surface-0: #ffffff;
   --surface-50: #FAFAFA;
   --surface-100: #F4F4F5;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index dc20cdb2e..e3cb7a6c4 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a:#1f2d40;
   --surface-b:#17212f;
   --surface-c:rgba(255, 255, 255, 0.03);
@@ -9,7 +11,6 @@
   --text-color-secondary:rgba(255, 255, 255, 0.6);
   --primary-color:#64B5F6;
   --primary-color-text:#212529;
-  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #17212f;
   --surface-50: #2e3744;
   --surface-100: #454d59;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index d08d0c421..a085b064c 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a:#1f2d40;
   --surface-b:#17212f;
   --surface-c:rgba(255, 255, 255, 0.03);
@@ -9,7 +11,6 @@
   --text-color-secondary:rgba(255, 255, 255, 0.6);
   --primary-color:#81C784;
   --primary-color-text:#212529;
-  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #17212f;
   --surface-50: #2e3744;
   --surface-100: #454d59;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 1ad467fe4..7dd367aec 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a:#1f2d40;
   --surface-b:#17212f;
   --surface-c:rgba(255, 255, 255, 0.03);
@@ -9,7 +11,6 @@
   --text-color-secondary:rgba(255, 255, 255, 0.6);
   --primary-color:#FFD54F;
   --primary-color-text:#212529;
-  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #17212f;
   --surface-50: #2e3744;
   --surface-100: #454d59;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index bfa933e9e..d400cca6e 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-a:#1f2d40;
   --surface-b:#17212f;
   --surface-c:rgba(255, 255, 255, 0.03);
@@ -9,7 +11,6 @@
   --text-color-secondary:rgba(255, 255, 255, 0.6);
   --primary-color:#BA68C8;
   --primary-color-text:#ffffff;
-  --font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
   --surface-0: #17212f;
   --surface-50: #2e3744;
   --surface-100: #454d59;
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index 38c3590b7..7e91f21dd 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: Poppins, sans-serif;
+  --font-family:Poppins, sans-serif;
   --surface-a:#161d21;
   --surface-b:#0e1315;
   --surface-c:rgba(158, 173, 230, 0.08);
@@ -9,7 +11,6 @@
   --text-color-secondary:rgba(255, 255, 255, 0.6);
   --primary-color:#9eade6;
   --primary-color-text:#121212;
-  --font-family:Poppins, sans-serif;
   --surface-0: #0e1315;
   --surface-50: #262b2c;
   --surface-100: #3e4244;
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index 7b49a6adf..94e855318 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -1,4 +1,6 @@
 :root {
+  font-family: Poppins, sans-serif;
+  --font-family:Poppins, sans-serif;
   --surface-a:#ffffff;
   --surface-b:#f5f5f5;
   --surface-c:#edf0fA;
@@ -9,7 +11,6 @@
   --text-color-secondary:#898989;
   --primary-color:#5472d4;
   --primary-color-text:#ffffff;
-  --font-family:Poppins, sans-serif;
   --surface-0: #ffffff;
   --surface-50: #f1f3f5;
   --surface-100: #e2e6eb;