Change banner font to a local one

src/components/global/Banner.tsx

@@ -1,9 +1,14 @@
 import { prisma } from "@/lib/prisma";
 import { cn } from "@/lib/utils";
-import { Fraunces } from "next/font/google";
+// import { Fraunces } from "next/font/google";
+import localFont from 'next/font/local';
 import Image from "next/image";
 
-const pacifico = Fraunces({ weight: "700", subsets: ["latin"] });
+// const pacifico = Fraunces({ weight: "700", subsets: ["latin"] });
+
+const myFont = localFont({
+  src: './Echotopia-Regular.woff2',
+})
 
 export default async function Banner() {
   const headerImage = await prisma.artwork.findFirst({
@@ -28,7 +33,7 @@ export default async function Banner() {
             priority
           />
           <div className="absolute inset-0 bg-black/40 flex items-center justify-center text-center">
-            <h1 className={cn(pacifico.className, "text-shadow text-white text-3xl md:text-5xl font-bold drop-shadow")}>
+            <h1 className={cn(myFont.className, "text-shadow text-white text-3xl md:text-5xl font-bold drop-shadow")}>
               {title}
             </h1>
           </div>