Optimized Fonts

next/font downloads fonts at build time and serves them from your own domain: no request to Google from the browser, and no layout shift when the font loads.

app/layout.tsx

import { Inter, Poppins } from 'next/font/google';
import './globals.css';

const inter = Inter({ subsets: ['latin'], display: 'swap', variable: '--font-inter' });
const poppins = Poppins({ subsets: ['latin'], weight: ['600', '700'], variable: '--font-poppins' });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.variable + ' ' + poppins.variable}>
      <body className="font-sans">{children}</body>
    </html>
  );
}

@import "tailwindcss";

@theme {
  --font-sans: var(--font-inter);
  --font-display: var(--font-poppins);
}

import localFont from 'next/font/local';

const brand = localFont({
  src: [
    { path: './fonts/ShopEase-Regular.woff2', weight: '400' },
    { path: './fonts/ShopEase-Bold.woff2', weight: '700' },
  ],
  variable: '--font-brand',
});