fonts for Next.js apps
Two ways to use onlyfonts fonts in Next.js, both without Google involvement.
option 1: CDN link tag
Add the stylesheet in your root layout:
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<link rel="preconnect" href="https://cdn.onlyfonts.ai" crossOrigin="anonymous" />
<link
href="https://cdn.onlyfonts.ai/css2?family=Inter:wght@400;600&display=swap"
rel="stylesheet"
/>
</head>
<body>{children}</body>
</html>
);
}This keeps the unicode-range subsetting benefit — visitors download only the character sets a page uses.
option 2: self-host with next/font/local
next/font's Google provider only talks to Google. For
self-hosting with Next's font optimization, download the woff2 files from
any font's page and use next/font/local:
// self-hosted with next/font/local
// download woff2 files from the font's page on onlyfonts.ai
import localFont from 'next/font/local';
const inter = localFont({
src: [
{ path: './fonts/inter-400.woff2', weight: '400' },
{ path: './fonts/inter-600.woff2', weight: '600' },
],
display: 'swap',
});Self-hosting gives you zero third-party requests and Next's automatic size-adjusted fallbacks; the CDN gives you per-script subsetting and no files to manage. Both are GDPR-clean (why this matters).
picking the font
search the catalog by description or screenshot, then copy weights and the snippet from the font's page. CDN details: CDN reference.