add poppins font but not working

src/pages/index.tsx

@@ -17,18 +17,18 @@ function Header() {
       <nav>
         <ul className="flex items-center gap-2 space-x-4">
           <li>
-            <Link href="/le-club" className="text-xl">Le club</Link>
+            <Link href="/le-club" className="text-xl font-poppins">Le club</Link>
           </li>
           <li>
-            <Link href="/galeries" className="text-xl">Galeries</Link>
+            <Link href="/galeries" className="text-xl font-poppins">Galeries</Link>
           </li>
           <li>
-            <Link href="/contact" className="text-xl">Contact</Link>
+            <Link href="/contact" className="text-xl font-poppins">Contact</Link>
           </li>
           <li>
             <Link
               href="/espace-membres"
-              className="bg-white px-6 py-2 text-xl text-stone-900"
+              className="bg-white px-6 py-2 text-xl text-stone-900 font-poppins"
             >
               Espace membres
             </Link>
@@ -80,7 +80,7 @@ function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div>
       <Header />
-      {children}
+        <main className="container mx-auto p-8">{children}</main>
       <Footer />
     </div>
   );
@@ -94,8 +94,11 @@ function Home() {
         alt=""
         width={1920}
         height={500}
-        className="absolute top-0 -z-10"
+        className="absolute top-0 left-0 -z-10"
       />
+      <div className="content mt-[400px]">
+        <h1 className="text-5xl font-bold font-poppins">Notre club photo</h1>
+      </div>
     </Layout>
   );
 }

src/styles/globals.css

@@ -3,7 +3,14 @@
 @tailwind utilities;
 
 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;800&display=swap');
 
-body {
+@layer base {
-  font-family: 'Lato', sans-serif;
+  html {
+    font-family: 'Lato', system-ui, sans-serif;
+  }
+}
+
+h1 {
+  font-family: 'Poppins', sans-serif;
 }

tailwind.config.cjs

@@ -2,7 +2,11 @@
 module.exports = {
   content: ["./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        poppins: ["Poppins", "sans-serif"],
+      },
+    },
   },
   plugins: [],
 };