diff --git a/pages/_app.tsx b/pages/_app.tsx
index c1f8ae3c..c65bf95e 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -13,6 +13,7 @@ import { withTRPC } from "@trpc/next";
 import type { TRPCClientErrorLike } from "@trpc/react";
 import { Maybe } from "@trpc/server";
 
+import "../styles/fonts.css";
 import "../styles/globals.css";
 
 function MyApp(props: AppProps) {
diff --git a/public/fonts/Roboto-Black.ttf b/public/fonts/Roboto-Black.ttf
new file mode 100644
index 00000000..144abcd5
Binary files /dev/null and b/public/fonts/Roboto-Black.ttf differ
diff --git a/public/fonts/Roboto-Black.woff b/public/fonts/Roboto-Black.woff
new file mode 100644
index 00000000..d77f5a1a
Binary files /dev/null and b/public/fonts/Roboto-Black.woff differ
diff --git a/public/fonts/Roboto-Black.woff2 b/public/fonts/Roboto-Black.woff2
new file mode 100644
index 00000000..8dff3b1b
Binary files /dev/null and b/public/fonts/Roboto-Black.woff2 differ
diff --git a/public/fonts/Roboto-BlackItalic.ttf b/public/fonts/Roboto-BlackItalic.ttf
new file mode 100644
index 00000000..af5c0d99
Binary files /dev/null and b/public/fonts/Roboto-BlackItalic.ttf differ
diff --git a/public/fonts/Roboto-BlackItalic.woff b/public/fonts/Roboto-BlackItalic.woff
new file mode 100644
index 00000000..943e97e6
Binary files /dev/null and b/public/fonts/Roboto-BlackItalic.woff differ
diff --git a/public/fonts/Roboto-BlackItalic.woff2 b/public/fonts/Roboto-BlackItalic.woff2
new file mode 100644
index 00000000..7f511913
Binary files /dev/null and b/public/fonts/Roboto-BlackItalic.woff2 differ
diff --git a/public/fonts/Roboto-Bold.ttf b/public/fonts/Roboto-Bold.ttf
new file mode 100644
index 00000000..0388c501
Binary files /dev/null and b/public/fonts/Roboto-Bold.ttf differ
diff --git a/public/fonts/Roboto-Bold.woff b/public/fonts/Roboto-Bold.woff
new file mode 100644
index 00000000..51f1e89d
Binary files /dev/null and b/public/fonts/Roboto-Bold.woff differ
diff --git a/public/fonts/Roboto-Bold.woff2 b/public/fonts/Roboto-Bold.woff2
new file mode 100644
index 00000000..8d1ec3a7
Binary files /dev/null and b/public/fonts/Roboto-Bold.woff2 differ
diff --git a/public/fonts/Roboto-BoldItalic.ttf b/public/fonts/Roboto-BoldItalic.ttf
new file mode 100644
index 00000000..0ac4cd4c
Binary files /dev/null and b/public/fonts/Roboto-BoldItalic.ttf differ
diff --git a/public/fonts/Roboto-BoldItalic.woff b/public/fonts/Roboto-BoldItalic.woff
new file mode 100644
index 00000000..d916f946
Binary files /dev/null and b/public/fonts/Roboto-BoldItalic.woff differ
diff --git a/public/fonts/Roboto-BoldItalic.woff2 b/public/fonts/Roboto-BoldItalic.woff2
new file mode 100644
index 00000000..ebca4c79
Binary files /dev/null and b/public/fonts/Roboto-BoldItalic.woff2 differ
diff --git a/public/fonts/Roboto-Italic.ttf b/public/fonts/Roboto-Italic.ttf
new file mode 100644
index 00000000..d6328315
Binary files /dev/null and b/public/fonts/Roboto-Italic.ttf differ
diff --git a/public/fonts/Roboto-Italic.woff b/public/fonts/Roboto-Italic.woff
new file mode 100644
index 00000000..8e72e8d1
Binary files /dev/null and b/public/fonts/Roboto-Italic.woff differ
diff --git a/public/fonts/Roboto-Italic.woff2 b/public/fonts/Roboto-Italic.woff2
new file mode 100644
index 00000000..17140141
Binary files /dev/null and b/public/fonts/Roboto-Italic.woff2 differ
diff --git a/public/fonts/Roboto-Light.ttf b/public/fonts/Roboto-Light.ttf
new file mode 100644
index 00000000..3a9bdc62
Binary files /dev/null and b/public/fonts/Roboto-Light.ttf differ
diff --git a/public/fonts/Roboto-Light.woff b/public/fonts/Roboto-Light.woff
new file mode 100644
index 00000000..eec3617f
Binary files /dev/null and b/public/fonts/Roboto-Light.woff differ
diff --git a/public/fonts/Roboto-Light.woff2 b/public/fonts/Roboto-Light.woff2
new file mode 100644
index 00000000..0e0efd09
Binary files /dev/null and b/public/fonts/Roboto-Light.woff2 differ
diff --git a/public/fonts/Roboto-LightItalic.ttf b/public/fonts/Roboto-LightItalic.ttf
new file mode 100644
index 00000000..82e9221f
Binary files /dev/null and b/public/fonts/Roboto-LightItalic.ttf differ
diff --git a/public/fonts/Roboto-LightItalic.woff b/public/fonts/Roboto-LightItalic.woff
new file mode 100644
index 00000000..b6b25253
Binary files /dev/null and b/public/fonts/Roboto-LightItalic.woff differ
diff --git a/public/fonts/Roboto-LightItalic.woff2 b/public/fonts/Roboto-LightItalic.woff2
new file mode 100644
index 00000000..b3300d9c
Binary files /dev/null and b/public/fonts/Roboto-LightItalic.woff2 differ
diff --git a/public/fonts/Roboto-Medium.ttf b/public/fonts/Roboto-Medium.ttf
new file mode 100644
index 00000000..09f51e2b
Binary files /dev/null and b/public/fonts/Roboto-Medium.ttf differ
diff --git a/public/fonts/Roboto-Medium.woff b/public/fonts/Roboto-Medium.woff
new file mode 100644
index 00000000..b4f0629a
Binary files /dev/null and b/public/fonts/Roboto-Medium.woff differ
diff --git a/public/fonts/Roboto-Medium.woff2 b/public/fonts/Roboto-Medium.woff2
new file mode 100644
index 00000000..02bf7645
Binary files /dev/null and b/public/fonts/Roboto-Medium.woff2 differ
diff --git a/public/fonts/Roboto-MediumItalic.ttf b/public/fonts/Roboto-MediumItalic.ttf
new file mode 100644
index 00000000..9943d857
Binary files /dev/null and b/public/fonts/Roboto-MediumItalic.ttf differ
diff --git a/public/fonts/Roboto-MediumItalic.woff b/public/fonts/Roboto-MediumItalic.woff
new file mode 100644
index 00000000..ca56ca36
Binary files /dev/null and b/public/fonts/Roboto-MediumItalic.woff differ
diff --git a/public/fonts/Roboto-MediumItalic.woff2 b/public/fonts/Roboto-MediumItalic.woff2
new file mode 100644
index 00000000..098ab8ad
Binary files /dev/null and b/public/fonts/Roboto-MediumItalic.woff2 differ
diff --git a/public/fonts/Roboto-Regular.ttf b/public/fonts/Roboto-Regular.ttf
new file mode 100644
index 00000000..28e2c02a
Binary files /dev/null and b/public/fonts/Roboto-Regular.ttf differ
diff --git a/public/fonts/Roboto-Regular.woff b/public/fonts/Roboto-Regular.woff
new file mode 100644
index 00000000..b070d8e0
Binary files /dev/null and b/public/fonts/Roboto-Regular.woff differ
diff --git a/public/fonts/Roboto-Regular.woff2 b/public/fonts/Roboto-Regular.woff2
new file mode 100644
index 00000000..30370cf2
Binary files /dev/null and b/public/fonts/Roboto-Regular.woff2 differ
diff --git a/public/fonts/Roboto-Thin.ttf b/public/fonts/Roboto-Thin.ttf
new file mode 100644
index 00000000..301842a5
Binary files /dev/null and b/public/fonts/Roboto-Thin.ttf differ
diff --git a/public/fonts/Roboto-Thin.woff b/public/fonts/Roboto-Thin.woff
new file mode 100644
index 00000000..bc180321
Binary files /dev/null and b/public/fonts/Roboto-Thin.woff differ
diff --git a/public/fonts/Roboto-Thin.woff2 b/public/fonts/Roboto-Thin.woff2
new file mode 100644
index 00000000..c5353095
Binary files /dev/null and b/public/fonts/Roboto-Thin.woff2 differ
diff --git a/public/fonts/Roboto-ThinItalic.ttf b/public/fonts/Roboto-ThinItalic.ttf
new file mode 100644
index 00000000..301fbe13
Binary files /dev/null and b/public/fonts/Roboto-ThinItalic.ttf differ
diff --git a/public/fonts/Roboto-ThinItalic.woff b/public/fonts/Roboto-ThinItalic.woff
new file mode 100644
index 00000000..88639462
Binary files /dev/null and b/public/fonts/Roboto-ThinItalic.woff differ
diff --git a/public/fonts/Roboto-ThinItalic.woff2 b/public/fonts/Roboto-ThinItalic.woff2
new file mode 100644
index 00000000..069ad7b9
Binary files /dev/null and b/public/fonts/Roboto-ThinItalic.woff2 differ
diff --git a/styles/fonts.css b/styles/fonts.css
new file mode 100644
index 00000000..1eeb5096
--- /dev/null
+++ b/styles/fonts.css
@@ -0,0 +1,123 @@
+/* Roboto */
+@font-face {
+  font-family: "Roboto";
+  src: url("/fonts/Roboto-Black.woff2") format("woff2"), url("/fonts/Roboto-Black.woff") format("woff"),
+    url("/fonts/Roboto-Black.ttf") format("truetype");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("/fonts/Roboto-Bold.woff2") format("woff2"), url("/fonts/Roboto-Bold.woff") format("woff"),
+    url("/fonts/Roboto-Bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("/fonts/Roboto-BoldItalic.woff2") format("woff2"),
+    url("/fonts/Roboto-BoldItalic.woff") format("woff"),
+    url("/fonts/Roboto-BoldItalic.ttf") format("truetype");
+  font-weight: bold;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("/fonts/Roboto-BlackItalic.woff2") format("woff2"),
+    url("/fonts/Roboto-BlackItalic.woff") format("woff"),
+    url("/fonts/Roboto-BlackItalic.ttf") format("truetype");
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("/fonts/Roboto-Light.woff2") format("woff2"), url("/fonts/Roboto-Light.woff") format("woff"),
+    url("/fonts/Roboto-Light.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("/fonts/Roboto-Italic.woff2") format("woff2"), url("/fonts/Roboto-Italic.woff") format("woff"),
+    url("/fonts/Roboto-Italic.ttf") format("truetype");
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("/fonts/Roboto-LightItalic.woff2") format("woff2"),
+    url("/fonts/Roboto-LightItalic.woff") format("woff"),
+    url("/fonts/Roboto-LightItalic.ttf") format("truetype");
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("/fonts/Roboto-Regular.woff2") format("woff2"), url("/fonts/Roboto-Regular.woff") format("woff"),
+    url("/fonts/Roboto-Regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("/fonts/Roboto-Medium.woff2") format("woff2"), url("/fonts/Roboto-Medium.woff") format("woff"),
+    url("/fonts/Roboto-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("/fonts/Roboto-MediumItalic.woff2") format("woff2"),
+    url("/fonts/Roboto-MediumItalic.woff") format("woff"),
+    url("/fonts/Roboto-MediumItalic.ttf") format("truetype");
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("/fonts/Roboto-Thin.woff2") format("woff2"), url("/fonts/Roboto-Thin.woff") format("woff"),
+    url("/fonts/Roboto-Thin.ttf") format("truetype");
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("/fonts/Roboto-ThinItalic.woff2") format("woff2"),
+    url("/fonts/Roboto-ThinItalic.woff") format("woff"),
+    url("/fonts/Roboto-ThinItalic.ttf") format("truetype");
+  font-weight: 100;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("/fonts/roboto.ttf");
+}
+
+@font-face {
+  font-family: "Cal Sans";
+  src: url("/cal.ttf");
+}
diff --git a/styles/globals.css b/styles/globals.css
index abb7bd98..97868908 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -24,18 +24,6 @@
   @apply rounded-sm focus:ring-primary-500 focus:border-primary-500 h-auto py-0.5 my-0.5;
 }
 
-/* Roboto */
-@font-face {
-  font-family: "Roboto";
-  src: url("https://app.cal.com/roboto.ttf");
-}
-
-/* Cal Sans */
-@font-face {
-  font-family: "Cal Sans";
-  src: url("https://app.cal.com/cal.ttf");
-}
-
 /* note(PeerRich): TODO move @layer components into proper React Components: <Button color="primary" size="xs" /> */
 @layer components {
   /* Primary buttons */