From 842e722a124e7fb3a85255023871ce73a347d7db Mon Sep 17 00:00:00 2001 From: Janpot <2109932+Janpot@users.noreply.github.com> Date: Wed, 14 Oct 2026 10:44:28 +0200 Subject: [PATCH 1/2] [docs-infra] Use font variables on body --- docs/pages/_app.tsx | 4 ++-- .../core-docs/src/Document/Document.tsx | 4 ++-- packages-internal/core-docs/src/nextFonts/index.ts | 12 +++++++----- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx index c9c917a0ad0549..1d421d0a2d124a 100644 --- a/docs/pages/_app.tsx +++ b/docs/pages/_app.tsx @@ -35,7 +35,7 @@ import { muiSvgLogotypeString, } from '@mui/internal-core-docs/svgIcons'; -import { fontClasses as _fontClasses } from '@mui/internal-core-docs/nextFonts'; +import { fontVariables as _fontVariables } from '@mui/internal-core-docs/nextFonts'; import versionsJson from '../versions.json'; import translationsJson from '../translations/translations.json'; import '../public/static/components-gallery/base-theme.css'; @@ -47,7 +47,7 @@ import './global.css'; // the global CSS imports above to be rejected. Re-export as a fresh local // binding to keep the file recognized as the Custom App. // Related issue - https://github.com/vercel/next.js/issues/93162 -export const fontClasses = _fontClasses; +export const fontVariables = _fontVariables; // Remove the license warning from demonstration purposes LicenseInfo.setLicenseKey(process.env.NEXT_PUBLIC_MUI_LICENSE!); diff --git a/packages-internal/core-docs/src/Document/Document.tsx b/packages-internal/core-docs/src/Document/Document.tsx index 6d33a63331b169..dbde91f12ce5d8 100644 --- a/packages-internal/core-docs/src/Document/Document.tsx +++ b/packages-internal/core-docs/src/Document/Document.tsx @@ -4,7 +4,7 @@ import { Html, Head, Main, NextScript } from 'next/document'; import GlobalStyles from '@mui/material/GlobalStyles'; import MuiInitColorSchemeScript from '@mui/material/InitColorSchemeScript'; import { getMetaThemeColor } from '../branding'; -import { fontClasses } from '../nextFonts'; +import { fontVariables } from '../nextFonts'; export type DocumentProps = { canonicalAsServer: string; @@ -91,7 +91,7 @@ export function Document({ canonicalAsServer, userLanguage, analytics, children }} /> - + {children}
diff --git a/packages-internal/core-docs/src/nextFonts/index.ts b/packages-internal/core-docs/src/nextFonts/index.ts index d770b5a8fd6488..b0e8b8d810c3a9 100644 --- a/packages-internal/core-docs/src/nextFonts/index.ts +++ b/packages-internal/core-docs/src/nextFonts/index.ts @@ -2,12 +2,14 @@ import { Inter, Roboto } from 'next/font/google'; import localFont from 'next/font/local'; export const inter = Inter({ + variable: '--font-inter', weight: ['300', '400', '500', '600', '700'], subsets: ['latin'], preload: false, }); export const roboto = Roboto({ + variable: '--font-roboto', weight: ['300', '400', '500', '700'], style: ['normal', 'italic'], subsets: ['latin'], @@ -15,6 +17,7 @@ export const roboto = Roboto({ }); export const generalSans = localFont({ + variable: '--font-general-sans', declarations: [{ prop: 'font-family', value: 'General Sans' }], src: [{ path: './fonts/GeneralSans-Semibold.woff2', weight: '600', style: 'normal' }], }); @@ -36,6 +39,7 @@ const generalSansDeferred = localFont({ // "⌘K" badge; each preloaded file delays LCP on slow links (~0.3s per 55kB // on Lighthouse mobile), so those two stay deferred. export const ibmPlexSans = localFont({ + variable: '--font-ibm-plex-sans', declarations: [{ prop: 'font-family', value: 'IBM Plex Sans' }], src: [ { path: './fonts/IBMPlexSans-Regular.woff2', weight: '400', style: 'normal' }, @@ -61,9 +65,7 @@ export const fonts = [ roboto, ]; -// The single-weight General Sans class sets font-weight: 600 on body. The import -// still registers and preloads the font, so the class is not necessary. -export const fontClasses = fonts - .filter((font) => font !== generalSans) - .map((font) => font.className) +// `className` also sets font-weight for single-file loaders, so body only gets the variables. +export const fontVariables = [ibmPlexSans, generalSans, inter, roboto] + .map((font) => font.variable) .join(' '); From 8e29cdf5bc5655a1ca8f48ef8e651f36cf6dd0fb Mon Sep 17 00:00:00 2001 From: Janpot <2109932+Janpot@users.noreply.github.com> Date: Wed, 14 Oct 2026 10:51:17 +0200 Subject: [PATCH 2/2] Keep the fontClasses name --- docs/pages/_app.tsx | 4 ++-- packages-internal/core-docs/src/Document/Document.tsx | 4 ++-- packages-internal/core-docs/src/nextFonts/index.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx index 1d421d0a2d124a..c9c917a0ad0549 100644 --- a/docs/pages/_app.tsx +++ b/docs/pages/_app.tsx @@ -35,7 +35,7 @@ import { muiSvgLogotypeString, } from '@mui/internal-core-docs/svgIcons'; -import { fontVariables as _fontVariables } from '@mui/internal-core-docs/nextFonts'; +import { fontClasses as _fontClasses } from '@mui/internal-core-docs/nextFonts'; import versionsJson from '../versions.json'; import translationsJson from '../translations/translations.json'; import '../public/static/components-gallery/base-theme.css'; @@ -47,7 +47,7 @@ import './global.css'; // the global CSS imports above to be rejected. Re-export as a fresh local // binding to keep the file recognized as the Custom App. // Related issue - https://github.com/vercel/next.js/issues/93162 -export const fontVariables = _fontVariables; +export const fontClasses = _fontClasses; // Remove the license warning from demonstration purposes LicenseInfo.setLicenseKey(process.env.NEXT_PUBLIC_MUI_LICENSE!); diff --git a/packages-internal/core-docs/src/Document/Document.tsx b/packages-internal/core-docs/src/Document/Document.tsx index dbde91f12ce5d8..6d33a63331b169 100644 --- a/packages-internal/core-docs/src/Document/Document.tsx +++ b/packages-internal/core-docs/src/Document/Document.tsx @@ -4,7 +4,7 @@ import { Html, Head, Main, NextScript } from 'next/document'; import GlobalStyles from '@mui/material/GlobalStyles'; import MuiInitColorSchemeScript from '@mui/material/InitColorSchemeScript'; import { getMetaThemeColor } from '../branding'; -import { fontVariables } from '../nextFonts'; +import { fontClasses } from '../nextFonts'; export type DocumentProps = { canonicalAsServer: string; @@ -91,7 +91,7 @@ export function Document({ canonicalAsServer, userLanguage, analytics, children }} /> - + {children}
diff --git a/packages-internal/core-docs/src/nextFonts/index.ts b/packages-internal/core-docs/src/nextFonts/index.ts index b0e8b8d810c3a9..bfdb25b3dc63e8 100644 --- a/packages-internal/core-docs/src/nextFonts/index.ts +++ b/packages-internal/core-docs/src/nextFonts/index.ts @@ -66,6 +66,6 @@ export const fonts = [ ]; // `className` also sets font-weight for single-file loaders, so body only gets the variables. -export const fontVariables = [ibmPlexSans, generalSans, inter, roboto] +export const fontClasses = [ibmPlexSans, generalSans, inter, roboto] .map((font) => font.variable) .join(' ');