diff --git a/public/fonts/inter-latin-italic.woff2 b/public/fonts/inter-latin-italic.woff2
new file mode 100644
index 0000000000..39eb636735
Binary files /dev/null and b/public/fonts/inter-latin-italic.woff2 differ
diff --git a/public/fonts/inter-latin-normal.woff2 b/public/fonts/inter-latin-normal.woff2
new file mode 100644
index 0000000000..b0d0e2e5c6
Binary files /dev/null and b/public/fonts/inter-latin-normal.woff2 differ
diff --git a/src/assets/css/fonts.css b/src/assets/css/fonts.css
new file mode 100644
index 0000000000..cea388ee75
--- /dev/null
+++ b/src/assets/css/fonts.css
@@ -0,0 +1,17 @@
+/* Inter Font Family */
+
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/inter-latin-normal.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/inter-latin-italic.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: italic;
+  font-display: swap;
+}
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 9c49e17046..dd6c8e6e29 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1,5 +1,6 @@
 @layer theme, base, primevue, components, utilities;
 
+@import './fonts.css';
 @import 'tailwindcss/theme' layer(theme);
 @import 'tailwindcss/utilities' layer(utilities);
 @import 'tw-animate-css';
@@ -52,6 +53,9 @@
   --text-xxs: 0.625rem;
   --text-xxs--line-height: calc(1 / 0.625);
 
+  /* Font Families */
+  --font-inter: 'Inter', sans-serif;
+
   /* Palette Colors */
   --color-charcoal-100: #171718;
   --color-charcoal-200: #202121;
@@ -101,8 +105,8 @@
 
   --color-error: #962a2a;
 
-  --color-blue-selection: rgb( from var(--color-blue-100) r g b / 0.3); 
-  --color-node-hover-100: rgb( from var(--color-charcoal-800) r g b/ 0.15);
+  --color-blue-selection: rgb(from var(--color-blue-100) r g b / 0.3);
+  --color-node-hover-100: rgb(from var(--color-charcoal-800) r g b/ 0.15);
   --color-node-hover-200: rgb(from var(--color-charcoal-800) r g b/ 0.1);
   --color-modal-tag: rgb(from var(--color-gray-400) r g b/ 0.4);
 
@@ -131,7 +135,7 @@
 
 @utility scrollbar-hide {
   scrollbar-width: none;
-  &::-webkit-scrollbar { 
+  &::-webkit-scrollbar {
     width: 1px;
   }
   &::-webkit-scrollbar-thumb {