fixed the font problem(custom font not loading)

AmirKakavand · Aug 5, 2024 · 524cb03 · 524cb03
1 parent cd08471
commit 524cb03
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,13 +1,19 @@
 import type { Metadata } from "next";
-import Head from "next/head"
+import Head from "next/head";
 import "./globals.css";
-
+import { Wellfleet } from "next/font/google";
 
 export const metadata: Metadata = {
   title: "Rick & Morty Wiki",
-  description: "Explore all the different characters of the popular Rick and Morty Show",
+  description:
+    "Explore all the different characters of the popular Rick and Morty Show",
 };
 
+const wellfleet = Wellfleet({
+  weight: '400',
+  subsets: ['latin'],
+});
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -18,8 +24,16 @@ export default function RootLayout({
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link rel="icon" href="/favicon.ico" sizes="any" />
-        </Head>
-      <body style={{fontFamily: "Wellfleet, sans-serif"}} className="max-w-screen">{children}</body>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link href="https://fonts.googleapis.com/css2?family=Wellfleet:wght@400&display=swap" rel="stylesheet" />
+      </Head>
+      <body
+        style={{ fontFamily: "Wellfleet, sans-serif" }}
+        className={wellfleet.className}
+      >
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/next.config.mjs b/next.config.mjs
@@ -13,6 +13,7 @@ const nextConfig = {
           { loader: '@next/font/google', options: { subsets: ['latin'] } },
         ],
       },
+      assetPrefix: process.env.NODE_ENV === 'production' ? '/Rick-and-Morty-Wiki/' : '',
 };
 
 // https://rickandmortyapi.com/api/character/avatar/1.jpeg
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,6 +13,7 @@ const nextConfig = { @@
               { loader: '@next/font/google', options: { subsets: ['latin'] } },
             ],
           },
+          assetPrefix: process.env.NODE_ENV === 'production' ? '/Rick-and-Morty-Wiki/' : '',
     };
     // https://rickandmortyapi.com/api/character/avatar/1.jpeg
@@ Expand Down @@