Skip to content

[docs] Migrate to next/font for fonts loading #20407

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

[docs] Migrate to next/font for fonts loading #20407

wants to merge 7 commits into from
+21 −29

Conversation

Copy link
Contributor

Copilot AI commented Nov 20, 2025 •
edited by Janpot
Loading

Ports mui/material-ui#47347 and mui/material-ui#47351 to eliminate render-blocking Google Fonts resources and improve Lighthouse performance scores.

Changes

  • docs/pages/_app.js: Migrate Inter and Roboto to next/font/google, export fontClasses
  • docs/babel.config.js: Delete (next/font requires SWC instead of Babel)
  • package.json: Update @mui/monorepo to latest version (d5e68b88) that includes the next/font changes from PR #47347

The _document.js file imports from the monorepo package, which now applies fontClasses to the body tag and removes old Google Fonts link tags. Fonts are now optimized and self-hosted by Next.js instead of loaded from external CDN.

Original prompt

port mui/material-ui#47347 to this repo

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

@Janpot
Migrate Google Fonts to next/font in docs
be37d11 
Co-authored-by: Janpot <2109932+Janpot@users.noreply.github.com>
@mui-bot
Copy link

mui-bot commented Nov 20, 2025 •
edited
Loading

Deploy preview: https://deploy-preview-20407--material-ui-x.netlify.app/

Bundle size report

Bundle Parsed size Gzip size
@mui/x-data-grid 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-pro 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-premium 0B(0.00%) 0B(0.00%)
@mui/x-charts 0B(0.00%) 0B(0.00%)
@mui/x-charts-pro 0B(0.00%) 0B(0.00%)
@mui/x-charts-premium 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers-pro 0B(0.00%) 0B(0.00%)
@mui/x-tree-view 0B(0.00%) 0B(0.00%)
@mui/x-tree-view-pro 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 2f1a4bd

Copilot AI changed the title [WIP] Port MUI pull request #47347 to this repository [docs] Migrate to next/font for Google Fonts Nov 20, 2025
Copilot AI requested a review from Janpot November 20, 2025 07:44
Copilot finished work on behalf of Janpot November 20, 2025 07:44
Janpot
Janpot requested changes Nov 20, 2025
View reviewed changes
Copy link
Member

@Janpot Janpot left a comment

Choose a reason for hiding this comment

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

@copilot next/font requires swc, so no babel config

docs/pages/_document.tsx Outdated
Copy link
Member

@Janpot Janpot Nov 20, 2025

Choose a reason for hiding this comment

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

@copilot don't cover this file,

Copy link
Contributor Author

Copilot AI Nov 20, 2025

Choose a reason for hiding this comment

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

Reverted - removed _document.tsx and restored original _document.js in 66c7655

@Janpot
Remove babel config and revert _document changes per review
66c7655 
Co-authored-by: Janpot <2109932+Janpot@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Nov 20, 2025 •
edited
Loading

@copilot next/font requires swc, so no babel config

Removed docs/babel.config.js in 66c7655

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • iojs.org
    • Triggering command: curl -q --fail --compressed -L -s REDACTED -o - (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Copilot AI requested a review from Janpot November 20, 2025 08:04
Copilot finished work on behalf of Janpot November 20, 2025 08:04
@Janpot
Copy link
Member

Janpot commented Nov 20, 2025

@copilot for this to work, you'll need to update the @mui/monorepo depednency to latest, such that the last version of _document is used, the one that doesn't contain the font loading anymore

@Janpot Janpot added type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. scope: docs-infra Involves the docs-infra product (https://www.notion.so/mui-org/b9f676062eb94747b6768209f7751305). labels Nov 20, 2025
@Janpot
Update @mui/monorepo to latest with next/font changes
e8d66fc 
Co-authored-by: Janpot <2109932+Janpot@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Nov 20, 2025 •
edited
Loading

@copilot for this to work, you'll need to update the @mui/monorepo depednency to latest, such that the last version of _document is used, the one that doesn't contain the font loading anymore

Updated @mui/monorepo to d5e68b88 (latest master) which includes the next/font changes in e8d66fc

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • iojs.org
    • Triggering command: curl -q --fail --compressed -L -s REDACTED -o - (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Copilot finished work on behalf of Janpot November 20, 2025 08:58
@Janpot Janpot changed the title [docs] Migrate to next/font for Google Fonts [docs] Migrate to next/font for fonts loading Nov 20, 2025
@Janpot Janpot marked this pull request as ready for review November 20, 2025 11:46
Janpot
Janpot reviewed Nov 20, 2025
View reviewed changes
docs/pages/_app.js
subsets: ['latin'],
});

export const fontClasses = `${inter.className} ${roboto.className}`;
Copy link
Member

@Janpot Janpot Nov 20, 2025

Choose a reason for hiding this comment

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

technically not being used, but I'm just replicating core _app.js for now

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@alexfauquette alexfauquette Awaiting requested review from alexfauquette alexfauquette is a code owner

@bernardobelchior bernardobelchior Awaiting requested review from bernardobelchior bernardobelchior is a code owner

@JCQuintas JCQuintas Awaiting requested review from JCQuintas JCQuintas is a code owner

1 more reviewer

@Janpot Janpot Janpot approved these changes

Reviewers whose approvals may not affect merge requirements

At least 1 approving review is required to merge this pull request.

Assignees

@Janpot Janpot

Copilot code review Copilot

Labels

scope: docs-infra Involves the docs-infra product (https://www.notion.so/mui-org/b9f676062eb94747b6768209f7751305). type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@mui-bot @Janpot