[code-infra] Move font loading to @mui/docs

docs/pages/_app.js

@@ -31,42 +31,9 @@ import SvgMuiLogomark, {
 } from 'docs/src/icons/SvgMuiLogomark';
 import './global.css';
 import '../public/static/components-gallery/base-theme.css';
-import { Inter, Roboto } from 'next/font/google';
-import localFont from 'next/font/local';
 import * as config from '../config';
 
-const inter = Inter({
-  weight: ['300', '400', '500', '600', '700'],
-  subsets: ['latin'],
-});
-
-const roboto = Roboto({
-  weight: ['300', '400', '500', '700'],
-  style: ['normal', 'italic'],
-  subsets: ['latin'],
-});
-
-const generalSans = localFont({
-  declarations: [{ prop: 'font-family', value: 'General Sans' }],
-  src: [
-    { path: '../public/static/fonts/GeneralSans-Regular.woff2', weight: '400', style: 'normal' },
-    { path: '../public/static/fonts/GeneralSans-Medium.woff2', weight: '500', style: 'normal' },
-    { path: '../public/static/fonts/GeneralSans-Semibold.woff2', weight: '600', style: 'normal' },
-    { path: '../public/static/fonts/GeneralSans-Bold.woff2', weight: '700', style: 'normal' },
-  ],
-});
-
-const ibmPlexSans = localFont({
-  declarations: [{ prop: 'font-family', value: 'IBM Plex Sans' }],
-  src: [
-    { path: '../public/static/fonts/IBMPlexSans-Regular.woff2', weight: '400', style: 'normal' },
-    { path: '../public/static/fonts/IBMPlexSans-Medium.woff2', weight: '500', style: 'normal' },
-    { path: '../public/static/fonts/IBMPlexSans-SemiBold.woff2', weight: '600', style: 'normal' },
-    { path: '../public/static/fonts/IBMPlexSans-Bold.woff2', weight: '700', style: 'normal' },
-  ],
-});
-
-export const fontClasses = `${inter.className} ${roboto.className} ${generalSans.className} ${ibmPlexSans.className}`;
+export { fontClasses } from '@mui/docs/nextFonts';
 
 // Remove the license warning from demonstration purposes
 LicenseInfo.setLicenseKey(process.env.NEXT_PUBLIC_MUI_LICENSE);

packages/mui-docs/package.json

@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/mui/material-ui/tree/master/packages/mui-docs",
   "scripts": {
-    "build": "code-infra build --copy \"src/translations/translations.json\" --copy \"src/translations/translations.json:esm\"",
+    "build": "code-infra build --copy \"src/translations/translations.json\" --copy \"src/translations/translations.json:esm\" --copy \"src/nextFonts/fonts\" --copy \"src/nextFonts/fonts:esm\"",
     "release": "pnpm build && pnpm publish",
     "test": "exit 0",
     "typescript": "tsc -p tsconfig.json"

packages/mui-docs/src/nextFonts/index.ts

@@ -0,0 +1,37 @@
+import { Inter, Roboto } from 'next/font/google';
+import localFont from 'next/font/local';
+
+export const inter = Inter({
+  weight: ['300', '400', '500', '600', '700'],
+  subsets: ['latin'],
+});
+
+export const roboto = Roboto({
+  weight: ['300', '400', '500', '700'],
+  style: ['normal', 'italic'],
+  subsets: ['latin'],
+});
+
+export const generalSans = localFont({
+  declarations: [{ prop: 'font-family', value: 'General Sans' }],
+  src: [
+    { path: './fonts/GeneralSans-Regular.woff2', weight: '400', style: 'normal' },
+    { path: './fonts/GeneralSans-Medium.woff2', weight: '500', style: 'normal' },
+    { path: './fonts/GeneralSans-Semibold.woff2', weight: '600', style: 'normal' },
+    { path: './fonts/GeneralSans-Bold.woff2', weight: '700', style: 'normal' },
+  ],
+});
+
+export const ibmPlexSans = localFont({
+  declarations: [{ prop: 'font-family', value: 'IBM Plex Sans' }],
+  src: [
+    { path: './fonts/IBMPlexSans-Regular.woff2', weight: '400', style: 'normal' },
+    { path: './fonts/IBMPlexSans-Medium.woff2', weight: '500', style: 'normal' },
+    { path: './fonts/IBMPlexSans-SemiBold.woff2', weight: '600', style: 'normal' },
+    { path: './fonts/IBMPlexSans-Bold.woff2', weight: '700', style: 'normal' },
+  ],
+});
+
+export const fonts = [inter, roboto, generalSans, ibmPlexSans];
+
+export const fontClasses = fonts.map((font) => font.className).join(' ');