diff --git a/apps/red-ui/src/assets/font/Inter-VariableFont.ttf b/apps/red-ui/src/assets/font/Inter-VariableFont.ttf
new file mode 100644
index 000000000..32a79990a
Binary files /dev/null and b/apps/red-ui/src/assets/font/Inter-VariableFont.ttf differ
diff --git a/apps/red-ui/src/assets/styles/red-fonts.scss b/apps/red-ui/src/assets/styles/red-fonts.scss
new file mode 100644
index 000000000..dcc2676fe
--- /dev/null
+++ b/apps/red-ui/src/assets/styles/red-fonts.scss
@@ -0,0 +1,36 @@
+/* inter-regular - latin */
+
+@font-face {
+    font-family: 'OpenSans Extrabold';
+    src: url('../font/OpenSans-ExtraBold.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-weight: 300;
+    src: url('../font/Inter-VariableFont.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-weight: 400;
+    src: url('../font/Inter-VariableFont.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-weight: 500;
+    src: url('../font/Inter-VariableFont.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-weight: 600;
+    src: url('../font/Inter-VariableFont.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-weight: 700;
+    src: url('../font/Inter-VariableFont.ttf') format('truetype');
+}
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index afb6047f7..79efa5208 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -1,17 +1,12 @@
 @import 'red-variables';
 @import 'red-mixins';
 
-@font-face {
-    font-family: 'OpenSans Extrabold';
-    src: url('../font/OpenSans-ExtraBold.ttf') format('truetype');
-}
-
 html,
 body {
     margin: 0;
     padding: 0;
     height: 100vh;
-    font-family: Inter, sans-serif;
+    font-family: 'Inter', sans-serif;
     color: $accent;
     font-size: 13px;
     line-height: 16px;
@@ -282,7 +277,7 @@ section.settings {
 
 .detail-row {
     opacity: 1;
-    font-family: Inconsolata, monospace, monospace;
+    font-family: Inter, sans-serif;
     font-size: 14px;
     letter-spacing: 0;
     line-height: 14px;
diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss
index 6d1bf1da8..c90b38a4a 100644
--- a/apps/red-ui/src/assets/styles/red-theme.scss
+++ b/apps/red-ui/src/assets/styles/red-theme.scss
@@ -1,5 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400;500;600;700&display=swap');
+@import 'red-fonts';
 @import '~ngx-toastr/toastr';
 @import 'red-material-theme';
 @import 'red-page-layout';