Next.js: Оптимизация шрифтов — пример кода

// app/layout.tsx — self-hosted Google font, applied to the whole app
import { Inter } from 'next/font/google';

// Runs at BUILD time. `Inter` is a variable font → no weight array needed.
const inter = Inter({
  subsets: ['latin'],       // ship only Latin glyphs
  display: 'swap',          // show fallback immediately, then swap (no FOIT)
  variable: '--font-inter', // expose as a CSS var for Tailwind/others
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      {/* apply the class, or reference var(--font-inter) in CSS */}
      {children}
    
  );
}

// Local / licensed font — same benefits, files live in your repo
import localFont from 'next/font/local';

const brand = localFont({
  src: [
    { path: './Brand-Regular.woff2', weight: '400', style: 'normal' },
    { path: './Brand-Bold.woff2', weight: '700', style: 'normal' },
  ],
  display: 'swap',
  variable: '--font-brand',
});

// tailwind.config.js — wire the CSS variable in
module.exports = {
  theme: { extend: { fontFamily: { sans: ['var(--font-inter)', 'sans-serif'] } } },
};