Use font DM Sans

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",

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",
-	},
 });

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>