📦 NEW: Integrated public sans font

Author: msaaddev

logo-generator-app/next.config.js

@@ -1,4 +1,9 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
-}
+  experimental: {
+    fontLoaders: [
+      { loader: "@next/font/google", options: { subsets: ["latin"] } },
+    ],
+  },
+};

logo-generator-app/package-lock.json

@@ -6,6 +6,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@next/font": "^13.1.4",
     "next": "latest",
     "react": "18.2.0",
     "react-dom": "18.2.0"

logo-generator-app/package.json

@@ -1,8 +1,18 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import { Public_Sans } from "@next/font/google";
+
+const publicSans = Public_Sans({
+  subsets: ["latin"],
+  variable: "--font-public-sans",
+});
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <main className={`${publicSans.variable} font-sans`}>
+      <Component {...pageProps} />
+    </main>
+  );
 }
 
-export default MyApp
+export default MyApp;

logo-generator-app/pages/_app.tsx

@@ -11,7 +11,7 @@ const Home: NextPage = () => {
       </Head>
 
       <main className="flex w-full flex-1 flex-col items-center justify-center px-20 text-center">
-        <h1 className="text-6xl font-bold">
+        <h1 className="text-6xl font-bold font-sans">
           Welcome to{' '}
           <a className="text-blue-600" href="https://nextjs.org">
             Next.js!

logo-generator-app/pages/index.tsx

@@ -1,12 +1,18 @@
+const { fontFamily } = require("tailwindcss/defaultTheme");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
-    './app/**/*.{js,ts,jsx,tsx}',
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+    "./app/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        sans: ["var(--font-public-sans)", ...fontFamily.sans],
+      },
+    },
   },
   plugins: [],
-}
+};