diff --git a/package-lock.json b/package-lock.json
index dd0378c..ebfd213 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
 				"@ckeditor/ckeditor5-react": "^9.3.1",
 				"@emotion/react": "^11.13.5",
 				"@emotion/styled": "^11.13.5",
+				"@fontsource/dm-sans": "^5.1.0",
 				"@hookform/resolvers": "^3.9.1",
 				"@prisma/client": "^5.22.0",
 				"@stripe/stripe-js": "^5.2.0",
@@ -1711,6 +1712,11 @@
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
 			}
 		},
+		"node_modules/@fontsource/dm-sans": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/@fontsource/dm-sans/-/dm-sans-5.1.0.tgz",
+			"integrity": "sha512-YpGtZ8Rbh+/84rn7o/rzBBFnikoLjhjtzKYAMZhSRr7xWU0piZDBFhUdI14M4Ub8emh0TSG/gU2pJOMUe9TGYA=="
+		},
 		"node_modules/@hookform/resolvers": {
 			"version": "3.9.1",
 			"resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.1.tgz",
diff --git a/package.json b/package.json
index df6857d..294fd66 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
 		"@ckeditor/ckeditor5-react": "^9.3.1",
 		"@emotion/react": "^11.13.5",
 		"@emotion/styled": "^11.13.5",
+		"@fontsource/dm-sans": "^5.1.0",
 		"@hookform/resolvers": "^3.9.1",
 		"@prisma/client": "^5.22.0",
 		"@stripe/stripe-js": "^5.2.0",
diff --git a/src/layout/theme.tsx b/src/layout/theme.tsx
index e8eb79b..5f3d9be 100644
--- a/src/layout/theme.tsx
+++ b/src/layout/theme.tsx
@@ -1,23 +1,6 @@
 import { extendTheme } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
-import { Global } from "@emotion/react";
-import React from "react";
-
-export const Fonts = () => (
-	<Global
-		styles={`
-        @font-face {
-            font-family: Roboto;
-            src: url(/fonts/Roboto-Light.ttf);
-        }
-        @font-face {
-            font-family: Roboto;
-            src: url(/fonts/Roboto-Bold.ttf);
-            font-weight: bold;
-        }
-    `}
-	/>
-);
+import "@fontsource/dm-sans";
 
 export const Theme = extendTheme({
 	config: {
@@ -49,7 +32,7 @@ export const Theme = extendTheme({
 				margin: "0px",
 				backgroundRepeat: "no-repeat",
 				backgroundAttachment: "fixed",
-				fontFamily: "Roboto",
+				fontFamily: "DM Sans",
 				fontSize: "15px",
 				bg: mode(
 					"linear-gradient(to right top,#2a1036,#361149,#43105d,#4f0f71,#5b0b87)",
@@ -58,7 +41,4 @@ export const Theme = extendTheme({
 			},
 		}),
 	},
-	fonts: {
-		body: "Roboto, sans-serif",
-	},
 });
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 4c8d8f4..677f8b9 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,6 +1,6 @@
 import Layout from "../layout";
 import { ChakraProvider } from "@chakra-ui/react";
-import { Theme, Fonts } from "../layout/theme";
+import { Theme } from "../layout/theme";
 import React from "react";
 import { trpc } from "../utils/trpc";
 
@@ -13,7 +13,6 @@ BigInt.prototype.toJSON = function () {
 const MyApp = ({ Component, pageProps }: any) => {
 	return (
 		<ChakraProvider theme={Theme}>
-			<Fonts />
 			<Layout>
 				<Component {...pageProps} />
 			</Layout>