Develop

frontend/next.config.mjs

@@ -1,10 +1,6 @@
 import { withSentryConfig } from '@sentry/nextjs';
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    webpack(config) {
-        config.devtool = 'hidden-source-map';
-        return config;
-    },
     images: {
         remotePatterns: [
             {
@@ -15,7 +11,7 @@ const nextConfig = {
             },
         ],
     },
-    optimizeFonts: false,
+    optimizeFonts: true,
 };
 
 export default withSentryConfig(nextConfig, {

frontend/src/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { AuthProvider as VisitorAuthProvider } from "@/contexts/VisitorAuthContext";
 import ApolloWrapper from "@/apollo/ApolloWrapper";
-import { Montserrat, Merriweather, Montez, Outfit, Marck_Script } from "next/font/google";
+import localFont from "next/font/local";
 import "./globals.css";
 import PageTransition from "@/components/PageTransition";
 import { VendorAuthProvider } from "@/contexts/VendorAuthContext";
@@ -14,37 +14,131 @@ export const metadata: Metadata = {
     icon : "/favicon.ico"}
 };
 
-const montserrat = Montserrat({
-  subsets: ["latin"],
-  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+
+const montserratFont = localFont({
+  src: [
+    {
+      path: "./fonts/Montserrat-Thin.ttf",
+      weight: "100",
+      style: "normal",
+    },
+    {
+      path: "./fonts/Montserrat-ExtraLight.ttf",
+      weight: "200",
+      style: "normal",
+    },
+    {
+      path: "./fonts/Montserrat-Light.ttf",
+      weight: "300",
+      style: "normal",
+    },
+    {
+      path: "./fonts/Montserrat-Regular.ttf",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "./fonts/Montserrat-Medium.ttf",
+      weight: "500",
+      style: "normal",
+    },
+    {
+      path: "./fonts/Montserrat-SemiBold.ttf",
+      weight: "600",
+      style: "normal",
+    },
+    {
+      path: "./fonts/Montserrat-Bold.ttf",
+      weight: "700",
+      style: "normal",
+    },
+    {
+      path: "./fonts/Montserrat-ExtraBold.ttf",
+      weight: "800",
+      style: "normal",
+    },
+    {
+      path: "./fonts/Montserrat-Black.ttf",
+      weight: "900",
+      style: "normal",
+    },
+  ],
   variable: "--font-montserrat",
+
 });
 
-const merriweather = Merriweather({
-  subsets: ["latin"],
-  weight: ["300", "400", "700", "900"],
+const merriweatherFont = localFont({
+  src: [
+    {
+      path: "./fonts/Merriweather-Light.ttf",
+      weight: "300",
+      style: "normal",
+    },
+    {
+      path: "./fonts/Merriweather-Regular.ttf",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "./fonts/Merriweather-Bold.ttf",
+      weight: "700",
+      style: "normal",
+    },
+    {
+      path: "./fonts/Merriweather-Black.ttf",
+      weight: "900",
+      style: "normal",
+    },
+  ],
   variable: "--font-merriweather",
+
 });
 
-const montez = Montez({
-  subsets: ["latin"],
-  weight: ["400"],
+const montezFont = localFont({
+  src: [
+    {
+      path: "./fonts/Montez-Regular.ttf",
+      weight: "400",
+      style: "normal",
+    },
+  ],
   variable: "--font-montez",
+
 });
 
-const outfit = Outfit({
-  subsets: ["latin"],
-  weight: ["100","400","700"],
+const outfitFont = localFont({
+  src: [
+    {
+      path: "./fonts/Outfit-Thin.ttf",
+      weight: "100",
+      style: "normal",
+    },
+    {
+      path: "./fonts/Outfit-Regular.ttf",
+      weight: "400",
+      style: "normal",
+    },
+    {
+      path: "./fonts/Outfit-Bold.ttf",
+      weight: "700",
+      style: "normal",
+    },
+  ],
   variable: "--font-outfit",
+
 });
 
-const marck_Script = Marck_Script({
-  subsets: ["latin-ext"],
-  style:["normal"],
-  weight: ["400"],
-  variable: "--font-marck-script",
+const marckScriptFont = localFont({
+  src: [
+    {
+      path: "./fonts/MarckScript-Regular.ttf",
+      weight: "400",
+      style: "normal",
+    },
+  ],
+    variable: "--font-marck-script",
   display: "swap",
-})
+});
 
 export default function RootLayout({
   children,
@@ -58,7 +152,7 @@ export default function RootLayout({
       </head>
 
       <body
-        className={`${montserrat.variable} ${merriweather.variable} ${montez.variable} ${outfit.variable} ${marck_Script.variable}`}
+        className={`${montserratFont.variable} ${merriweatherFont.variable} ${montezFont.variable} ${outfitFont.variable} ${marckScriptFont.variable}`}
       >
         <ApolloWrapper>
           {/* Wrapping the application with VisitorProvider */}