Docs: Wrong example on Pages router with Fonts in _document.tsx #88832
Description
What is the documentation issue?
Thank you for fixing the issue so quickly after I have raised it in #88291, however, it is still incorrect.
It suggests defining fonts in the _document.tsx page with
import { Html, Head, Main, NextScript } from 'next/document'
import { Geist } from 'next/font/google'
const geist = Geist({
subsets: ['latin'],
})
export default function Document() {
return (
<Html lang="en" className={geist.className}>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
However, that raises an error:
Error Type
Build Error
Error Message
next/font: error:
Build Output
./fe/_document.tsx
next/font: error:
Cannot be used within _document.tsxNext.js version: 16.0.8 (Turbopack)
Is there any context that might help us understand?
related: #88291, https://stackoverflow.com/a/79863801/985454
I found a better way to define and use the fonts natively with tailwind as mentioned in the linked SO QA.
It allows to use multiple fonts and refer to them via variables.
Instead of .className it utilizes the .variable output.
The required part that made it work together was to specify the default font class together with the definition.
- Add
font-sansto the same element or after the fonts are defined with.variable.
_app.tsx
import { Geist, Geist_Mono } from 'next/font/google'
import type { AppProps } from 'next/app'
const geist = Geist({
variable: "--font-geist-sans",
subsets: ['latin'],
})
const geistMono= Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
weight: ["400", "700"],
})
export default function MyApp({ Component, pageProps }: AppProps) {
return (
<main className={`${geist.variable} ${geistMono.variable} font-sans`}>
<Component {...pageProps} />
</main>
)
}
globals.css
This defines the utility classes for later use, e.g. className="font-sans"
@theme inline {
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
This explains how it works:
<html> - this is where tailwind defines its utility classes, so that we can use font-sans and font-mono as declared in globals.css, however, the variables for the referenced fonts are not yet defined, so they end up unresolved.
<html class="font-sans"> // gives "--font-geist-sans is not defined
<body class="font-sans"> // gives "--font-geist-sans is not defined
<div id="__next">
<div id="App" class="font-sans geist-module__variable"> // --font-geist-sans is defined
// Font works correctly here
// ...
Does the docs page already exist? Please link to it.
https://nextjs.org/docs/pages/getting-started/fonts#with-tailwind-css