diff --git a/public/fonts/CalSans-SemiBold.woff2 b/public/fonts/CalSans-SemiBold.woff2
new file mode 100644
index 0000000..36d71b7
Binary files /dev/null and b/public/fonts/CalSans-SemiBold.woff2 differ
diff --git a/public/fonts/InterVariable.ttf b/public/fonts/InterVariable.ttf
new file mode 100644
index 0000000..4ab79e0
Binary files /dev/null and b/public/fonts/InterVariable.ttf differ
diff --git a/public/fonts/Roboto-VariableFont_wdth,wght.ttf b/public/fonts/Roboto-VariableFont_wdth,wght.ttf
new file mode 100644
index 0000000..bba55f6
Binary files /dev/null and b/public/fonts/Roboto-VariableFont_wdth,wght.ttf differ
diff --git a/public/fonts/fonts.css b/public/fonts/fonts.css
new file mode 100644
index 0000000..36abe1b
--- /dev/null
+++ b/public/fonts/fonts.css
@@ -0,0 +1,23 @@
+@font-face {
+  font-family: "Inter";
+  src: url("InterVariable.ttf") format("truetype");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Roboto";
+  src: url("Roboto-VariableFont_wdth,wght.ttf") format("truetype");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Cal Sans";
+  src: url("CalSans-SemiBold.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
diff --git a/public/index.html b/public/index.html
index fc1c71a..e8c6651 100644
--- a/public/index.html
+++ b/public/index.html
@@ -20,16 +20,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Cal+Sans&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&family=Cal+Sans&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
-      rel="stylesheet"
-    />
+    <link rel="stylesheet" href="<%= assetPrefix %>/fonts/fonts.css" />
+
     <title>Twake Calendar</title>
     <script src="<%= assetPrefix %>/.env.js"></script>
     <script src="<%= assetPrefix %>/appList.js"></script>