Issue Station
Sign In
Tools hereToolbox

nextjs - ✅(Solved) Fix Docs: Wrong example with app router documentation on pages router with Fonts [2 pull requests, 1 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#88291•Fetched 2026-04-08 02:05:09
View on GitHub
Comments
1
Participants
2
Timeline
12
Reactions
0
Author
ackvfackvf
Participants
ackvfackvfgithub-actions[bot]github-actions[bot]
Timeline (top)
referenced ×4cross-referenced ×3closed ×1commented ×1

Fix Action

Fixed

PR fix notes

PR #88326: docs: fix Pages Router fonts documentation showing App Router examples

Description (problem / solution / changelog)

Summary

Fixes #88291

The Pages Router fonts documentation was incorrectly showing App Router examples (app/layout.tsx) which don't exist in Pages Router. This confused users trying to use fonts with the Pages Router.

Changes

Updated docs/01-app/01-getting-started/13-fonts.mdx to include proper <AppOnly> and <PagesOnly> sections:

For Pages Router users:

  • Added examples using pages/_app.tsx (Custom App) to wrap components with font className
  • Added examples using pages/_document.tsx (Custom Document) to apply fonts to the <html> element

For App Router users:

  • Wrapped existing app/layout.tsx examples in <AppOnly> sections

This follows the same pattern used in other shared documentation like docs/01-app/01-getting-started/11-css.mdx which properly separates App Router and Pages Router content.

Changed files

  • docs/01-app/01-getting-started/13-fonts.mdx (modified, +214/-0)

PR #88849: docs: fix missing Roboto_Mono import in Pages Router font example

Description (problem / solution / changelog)

What?

Fix a broken Pages Router Tailwind font example where Roboto_Mono is used without being imported.

Why?

The current documentation example throws a ReferenceError when copied, which can confuse users following the Pages Router + Tailwind CSS font setup.

How?

Add the missing Roboto_Mono import from next/font/google in the Pages Router example.

Fixes #88291

Changed files

  • docs/01-app/03-api-reference/02-components/font.mdx (modified, +1/-1)
RAW_BUFFERClick to expand / collapse

What is the documentation issue?

https://nextjs.org/docs/pages/getting-started/fonts#with-tailwind-css

This is the Pages Router documentation, however, it applies the Fonts using App Router mechanism.

The links referenced on the page also sometimes lead to /docs/pages/* and sometimes to /docs/app/*.

Is there any context that might help us understand?

There is no Layout component at app/layout.tsx in Pages Router.

Does the docs page already exist? Please link to it.

https://nextjs.org/docs/pages/getting-started/fonts#with-tailwind-css

related: https://stackoverflow.com/questions/79863796/how-to-correctly-define-next-font-in-next-js-pages-router-with-tailwind-v4s-in

extent analysis

TL;DR

Update the documentation to reflect the correct usage of Fonts with Tailwind CSS in Next.js Pages Router.

Guidance

  • Verify that the documentation accurately describes the usage of Fonts with Tailwind CSS in Next.js Pages Router, rather than App Router.
  • Check the links on the page to ensure they consistently point to the correct documentation section, either /docs/pages/* or /docs/app/*.
  • Consider adding a note about the absence of a Layout component at app/layout.tsx in Pages Router and its implications for Fonts usage.
  • Review the related Stack Overflow question to ensure the documentation addresses the concerns and questions raised there.

Notes

The issue seems to be related to outdated or incorrect documentation, and updating it should resolve the problem. However, without more information about the specific changes needed, it's difficult to provide a more detailed solution.

Recommendation

Apply workaround: Update the documentation to reflect the correct usage of Fonts with Tailwind CSS in Next.js Pages Router, as this seems to be the root cause of the issue.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#embedding generation#cache error#pipeline error#runtime error#dependency conflict

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

nextjs - ✅(Solved) Fix Docs: Wrong example with app router documentation on pages router with Fonts [2 pull requests, 1 comments, 2 participants]