diff --git a/apps/studio/app/fonts.css b/apps/studio/app/fonts.css
new file mode 100644
index 00000000000..58d8b782188
--- /dev/null
+++ b/apps/studio/app/fonts.css
@@ -0,0 +1,81 @@
+/* header and body font */
+
+@font-face {
+  font-family: 'circular';
+  src:
+    url(../public/fonts/custom/CustomFont-Book.woff2) format('woff2'),
+    url(../public/fonts/custom/CustomFont-Book.woff) format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'circular';
+  src:
+    url(../public/fonts/custom/CustomFont-BookItalic.woff2) format('woff2'),
+    url(../public/fonts/custom/CustomFont-BookItalic.woff) format('woff');
+  font-weight: 400;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'circular';
+  src:
+    url(../public/fonts/custom/CustomFont-Medium.woff2) format('woff2'),
+    url(../public/fonts/custom/CustomFont-Medium.woff) format('woff');
+  font-weight: 500;
+  font-style: normal;
+}
+/* @font-face {
+  font-family: 'circular';
+  src:
+    url(../public/fonts/custom/CustomFont-MediumItalic.woff2) format('woff2'),
+    url(../public/fonts/custom/CustomFont-MediumItalic.woff) format('woff');
+  font-weight: 500;
+  font-style: italic;
+} */
+@font-face {
+  font-family: 'circular';
+  src:
+    url(../public/fonts/custom/CustomFont-Bold.woff2) format('woff2'),
+    url(../public/fonts/custom/CustomFont-Bold.woff) format('woff');
+  font-weight: 700;
+  font-style: 600;
+}
+@font-face {
+  font-family: 'circular';
+  src:
+    url(../public/fonts/custom/CustomFont-BoldItalic.woff2) format('woff2'),
+    url(../public/fonts/custom/CustomFont-BoldItalic.woff) format('woff');
+  font-style: 600;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'circular';
+  src:
+    url(../public/fonts/custom/CustomFont-Black.woff2) format('woff2'),
+    url(../public/fonts/custom/CustomFont-Black.woff) format('woff');
+  font-weight: 800;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'circular';
+  src:
+    url(../public/fonts/custom/CustomFont-BlackItalic.woff2) format('woff2'),
+    url(../public/fonts/custom/CustomFont-BlackItalic.woff) format('woff');
+  font-weight: 800;
+  font-style: italic;
+}
+
+/* mono font */
+
+/* @font-face {
+  font-family: 'source code pro';
+  src: url('../fonts/source-code-pro/SourceCodePro-Regular.eot');
+  src:
+    url('../fonts/source-code-pro/SourceCodePro-Regular.woff2') format('woff2'),
+    url('../fonts/source-code-pro/SourceCodePro-Regular.woff') format('woff'),
+    url('../fonts/source-code-pro/SourceCodePro-Regular.ttf') format('truetype'),
+    url('../fonts/source-code-pro/SourceCodePro-Regular.svg#SourceCodePro-Regular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+} */
diff --git a/apps/studio/app/layout.tsx b/apps/studio/app/layout.tsx
index 39d9c8577ba..5131705cba7 100644
--- a/apps/studio/app/layout.tsx
+++ b/apps/studio/app/layout.tsx
@@ -18,6 +18,7 @@ import 'styles/toast.scss'
 import 'styles/ui.scss'
 import 'ui/build/css/themes/dark.css'
 import 'ui/build/css/themes/light.css'
+import './fonts.css'
 
 import { loader } from '@monaco-editor/react'
 import { TooltipProvider } from '@radix-ui/react-tooltip'