Skip to content

Conversation

@timneutkens
Copy link
Member

@timneutkens timneutkens commented Jan 9, 2026

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.

@nextjs-bot nextjs-bot added created-by: Turbopack team PRs by the Turbopack team. Documentation Related to Next.js' official documentation. Font (next/font) Related to Next.js Font Optimization. labels Jan 9, 2026
Copy link
Member Author

This stack of pull requests is managed by Graphite. Learn more about stacking.


If you want to apply the font to the `<html>` element, you can use a [Custom Document](/docs/pages/building-your-application/routing/custom-document) (`pages/_document`):

```tsx filename="pages/_document.tsx" highlight={2,9,14} switcher
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

highlight={2,8} - and that's it I think?

The Pages Router fonts documentation was incorrectly showing App Router
examples (app/layout.tsx) which don't exist in Pages Router.

Added proper <AppOnly> and <PagesOnly> sections to show router-specific
examples:
- Pages Router: pages/_app.tsx and pages/_document.tsx examples
- App Router: app/layout.tsx examples (existing)

Fixes #88291
@timneutkens timneutkens force-pushed the fix-pages-router-fonts-docs branch from 8fa1c26 to 3e7b41f Compare January 12, 2026 15:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

created-by: Turbopack team PRs by the Turbopack team. Documentation Related to Next.js' official documentation. Font (next/font) Related to Next.js Font Optimization.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Docs: Wrong example with app router documentation on pages router with Fonts

4 participants