Skip to content

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

Merged
timneutkens merged 2 commits intocanaryfrom
fix-pages-router-fonts-docs
Jan 15, 2026
Merged

docs: fix Pages Router fonts documentation showing App Router examples#88326
timneutkens merged 2 commits intocanaryfrom
fix-pages-router-fonts-docs

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.

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
@timneutkens timneutkens merged commit 8d7682f into canary Jan 15, 2026
74 checks passed
@timneutkens timneutkens deleted the fix-pages-router-fonts-docs branch January 15, 2026 09:53
icyJoseph pushed a commit that referenced this pull request Jan 22, 2026
#88326)

## 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.
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 29, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

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. locked

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