diff --git a/examples/material-next-app-router-ts/src/app/layout.tsx b/examples/material-next-app-router-ts/src/app/layout.tsx index 402472f26d706b..0d87537621b5d8 100644 --- 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 ( - + 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 index 6fd270b00ead62..27cced35c5ef80 100644 --- 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: {