Change the way of implementing custom font for the server documentation. Also refactor some styles at "app/globals.css" file

app/globals.css

@@ -1,5 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap");
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -7,7 +5,21 @@
 html {
 	height: 100%;
 	width: 100%;
-	font-family: "Poppins" sans-serif;
+	font-family: "Poppins", sans-serif;
+	overflow-x: hidden;
+}
+
+body {
+	font-family: var(--font-poppins);
+	user-select: text;
+	overflow-x: clip;
+}
+
+* {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	scroll-behavior: smooth;
 }
 
 @layer base {
@@ -59,26 +71,7 @@ html {
 		--input: 240 3.7% 15.9%;
 		--ring: 142.4 71.8% 29.2%;
 	}
-}
 
-* {
-	list-style: none;
-	padding: 0;
-	margin: 0;
-	scroll-behavior: smooth;
-}
-
-html {
-	overflow-x: hidden;
-}
-
-body {
-	font-family: var(--font-poppins);
-	user-select: text;
-	overflow-x: clip;
-}
-
-@layer base {
 	* {
 		@apply border-border;
 	}

pages/_app.tsx

@@ -1,10 +1,23 @@
-import "@/app/globals.css";
+import { Poppins } from "next/font/google";
+import "./globals.css";
+
+const poppins = Poppins({
+  weight: ["400", "600", "700", "900"],
+  subsets: ["latin"],
+});
 
 function MyApp({ Component, pageProps }) {
 	return (
-		<main style={{ fontFamily: "Poppins" }}>
-			<Component {...pageProps} />
-		</main>
+		<>
+			<style jsx global>{`
+				html {
+					font-family: ${poppins.style.fontFamily};
+				}
+			`}</style>
+			<div className={`antialiased ${poppins.className}`}>
+				<Component {...pageProps} />
+			</div>
+		</>
 	);
 }
 

pages/globals.css

@@ -0,0 +1,7 @@
+html {
+	font-family: "Poppins", sans-serif;
+}
+
+* {
+	scroll-behavior: smooth;
+}