[docs-infra] Migrate to next/font (#47347)

Author: Janpot

docs/babel.config.js

@@ -22,7 +22,6 @@ import { CodeVariantProvider } from 'docs/src/modules/utils/codeVariant';
 import DocsStyledEngineProvider from 'docs/src/modules/utils/StyledEngineProvider';
 import createEmotionCache from 'docs/src/createEmotionCache';
 import findActivePage from 'docs/src/modules/utils/findActivePage';
-import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import getProductInfoFromUrl from 'docs/src/modules/utils/getProductInfoFromUrl';
 import { DocsProvider } from '@mui/docs/DocsProvider';
 import { mapTranslations } from '@mui/docs/i18n';
@@ -32,8 +31,22 @@ 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 * 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'],
+});
+
+export const fontClasses = `${inter.className} ${roboto.className}`;
+
 // Remove the license warning from demonstration purposes
 LicenseInfo.setLicenseKey(process.env.NEXT_PUBLIC_MUI_LICENSE);
 
@@ -298,20 +311,10 @@ function AppWrapper(props) {
     };
   }, [productId, productCategoryId, productIdentifier, router.pathname]);
 
-  let fonts = [];
-  if (pathnameToLanguage(router.asPath).canonicalAs.match(/onepirate/)) {
-    fonts = [
-      'https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&family=Work+Sans:wght@300;400&display=swap',
-    ];
-  }
-
   return (
     <React.Fragment>
       <NextHead>
         <meta name="viewport" content="initial-scale=1, width=device-width" />
-        {fonts.map((font) => (
-          <link rel="stylesheet" href={font} key={font} />
-        ))}
         <meta name="mui:productId" content={productId} />
         <meta name="mui:productCategoryId" content={productCategoryId} />
       </NextHead>

docs/pages/_app.js

@@ -9,6 +9,7 @@ import JoyInitColorSchemeScript from '@mui/joy/InitColorSchemeScript';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import createEmotionCache from 'docs/src/createEmotionCache';
 import { getMetaThemeColor } from '@mui/docs/branding';
+import { fontClasses } from './_app';
 
 const PRODUCTION_GA =
   process.env.DEPLOY_ENV === 'production' || process.env.DEPLOY_ENV === 'staging';
@@ -49,48 +50,6 @@ export default class MyDocument extends Document {
             }${canonicalAsServer}`}
           />
           <link rel="alternate" href={`https://mui.com${canonicalAsServer}`} hrefLang="x-default" />
-          {/*
-            Preconnect allows the browser to setup early connections before an HTTP request
-            is actually sent to the server.
-            This includes DNS lookups, TLS negotiations, TCP handshakes.
-          */}
-          <link href="https://fonts.gstatic.com" rel="preconnect" crossOrigin="anonymous" />
-          <link rel="preconnect" href="https://fonts.googleapis.com" />
-          <link
-            href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap"
-            rel="stylesheet"
-          />
-          {/* ========== Font preload (prevent font flash) ============= */}
-          <link
-            rel="preload"
-            // optimized for english characters (40kb -> 6kb)
-            href="/static/fonts/GeneralSans-Semibold-subset.woff2"
-            as="font"
-            type="font/woff2"
-            crossOrigin="anonymous"
-          />
-          <style
-            // the above <link> does not work in mobile device, this inline <style> fixes it without blocking resources
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{
-              __html: `@font-face{font-family:'General Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/GeneralSans-Semibold-subset.woff2') format('woff2');}`,
-            }}
-          />
-          <link
-            rel="preload"
-            // optimized for english characters (40kb -> 6kb)
-            href="/static/fonts/IBMPlexSans-Regular-subset.woff2"
-            as="font"
-            type="font/woff2"
-            crossOrigin="anonymous"
-          />
-          <style
-            // the above <link> does not work in mobile device, this inline <style> fixes it without blocking resources
-            // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{
-              __html: `@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/IBMPlexSans-Regular-subset.woff2') format('woff2');}`,
-            }}
-          />
           {/* =========================================================== */}
           <style
             // Loads General Sans: Regular (400), Medium (500), SemiBold (600), Bold (700)
@@ -166,7 +125,7 @@ export default class MyDocument extends Document {
             }}
           />
         </Head>
-        <body>
+        <body className={fontClasses}>
           <MuiInitColorSchemeScript defaultMode="system" />
           <JoyInitColorSchemeScript defaultMode="system" />
           <Main />

docs/pages/_document.js

@@ -1,16 +1,28 @@
 import * as React from 'react';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
+import { Roboto_Condensed, Work_Sans } from 'next/font/google';
 import theme from './theme';
 
+const robotoCondensed = Roboto_Condensed({
+  weight: ['700'],
+  subsets: ['latin'],
+});
+const workSans = Work_Sans({
+  weight: ['300', '400'],
+  subsets: ['latin'],
+});
+
 export default function withRoot(Component) {
   function WithRoot(props) {
     return (
-      <ThemeProvider theme={theme}>
-        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-        <CssBaseline />
-        <Component {...props} />
-      </ThemeProvider>
+      <div className={`${robotoCondensed.className} ${workSans.className}`}>
+        <ThemeProvider theme={theme}>
+          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+          <CssBaseline />
+          <Component {...props} />
+        </ThemeProvider>
+      </div>
     );
   }
 

docs/src/pages/premium-themes/onepirate/modules/withRoot.js

@@ -1,18 +1,30 @@
 import * as React from 'react';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
+import { Roboto_Condensed, Work_Sans } from 'next/font/google';
 import theme from './theme';
 
+const robotoCondensed = Roboto_Condensed({
+  weight: ['700'],
+  subsets: ['latin'],
+});
+const workSans = Work_Sans({
+  weight: ['300', '400'],
+  subsets: ['latin'],
+});
+
 export default function withRoot<P extends React.JSX.IntrinsicAttributes>(
   Component: React.ComponentType<P>,
 ) {
   function WithRoot(props: P) {
     return (
-      <ThemeProvider theme={theme}>
-        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-        <CssBaseline />
-        <Component {...props} />
-      </ThemeProvider>
+      <div className={`${robotoCondensed.className} ${workSans.className}`}>
+        <ThemeProvider theme={theme}>
+          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+          <CssBaseline />
+          <Component {...props} />
+        </ThemeProvider>
+      </div>
     );
   }