Fix material-next-app-router Font Usage with next/font

mui · Jul 18, 2023 · 1e2aef9 · 1e2aef9
1 parent 1b9c8ab
commit 1e2aef9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/examples/material-next-app-router-ts/src/app/layout.tsx b/examples/material-next-app-router-ts/src/app/layout.tsx
@@ -26,7 +26,11 @@ export const metadata = {
   description: 'Next.js App Router + Material UI v5',
 };
 
-const roboto = Roboto({ weight: ['300', '400', '500', '700'], subsets: ['latin'] });
+const roboto = Roboto({
+  variable: '--font-roboto',
+  weight: ['300', '400', '500', '700'],
+  subsets: ['latin'],
+});
 
 const DRAWER_WIDTH = 240;
 
@@ -44,7 +48,7 @@ const PLACEHOLDER_LINKS = [
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" className={roboto.variable}>
       <body className={roboto.className}>
         <ThemeRegistry>
           <AppBar position="fixed" sx={{ zIndex: 2000 }}>

diff --git a/examples/material-next-app-router-ts/src/components/ThemeRegistry/theme.ts b/examples/material-next-app-router-ts/src/components/ThemeRegistry/theme.ts
@@ -4,6 +4,9 @@ const defaultTheme = createTheme({
   palette: {
     mode: 'light',
   },
+  typography: {
+    fontFamily: 'var(--font-roboto)',
+  },
   components: {
     MuiAlert: {
       styleOverrides: {