React & Next.js Font Setup
Pick a Google Font. Get boilerplate for next/font (App Router), Vite / TanStack Start, and the Tailwind theme variable.
Runs entirely in your browser — no upload, no registration.
Next.js App Router — next/font/google
// app/layout.tsx (App Router)
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
});
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={inter.variable}>
<body>{children}</body>
</html>
);
}Vite / TanStack Start — <link>
// Vite / TanStack Start — add to your root layout head
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
/>Tailwind v4 @theme
/* Tailwind v4 — src/styles.css */
@theme {
--font-inter: 'Inter', system-ui, sans-serif;
}What this tool does
Generates the exact snippets to load a Google Font in a modern React project — self-hosted (via next/font) or CDN (via <link>).
Why you might need it
Copying next/font's TypeScript types wrong breaks builds. This generator emits the correct import name (underscores) and CSS-variable wiring.
How to use it
- Type the family exactly as it appears on Google Fonts.
- Copy the snippet for your stack.
- Reference the font via var(--font-*) or a Tailwind utility.
Always review the included licence before commercial use. Do not remove copyright records, designer names, licensing metadata or embedding restrictions from any font you process.