I have loaded a custom font and use it as Next document describes. Most of the MUI components font inherited from the theme font family, but Button and ToggleButton and some other MUI components are not inherited the font family.
_app.js :
import localFont from "next/font/local";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
export const myFont = localFont({
src: "../assets/fonts/IRANSansXFaNum_Regular.woff2",
});
const darkTheme = createTheme({
palette: {
mode: "dark",
},
typography: {
allVariants: {
fontFamily: ["IRANSansXFaNum_Regular.woff2"].join(","),
},
},
components: {
// Name of the component
MuiButton: {
styleOverrides: {
// Name of the slot
root: {
// Some CSS
fontFamily: "IRANSansXFaNum_Regular",
fontWeight: 900,
fontSize: 20,
},
},
},
},
});
function MyApp({ Component, pageProps }) {
return (
<main className={myFont.className}>
<ThemeProvider theme={darkTheme}>
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</main>
);
}
export default MyApp;
the sample page:
import * as React from "react";
import Grid from "@mui/material/Unstable_Grid2";
import { Button, Divider } from "@mui/material";
import { Container } from "@mui/system";
export default function MakeOrder(props) {
return (
<Container>
<Grid container spacing={2} sx={{ textAlign: "center", mt: 5 }}>
<Grid xs={12}>
{"inherited font family: "}
{"فونت فارسی"}
<Divider sx={{ my: 1 }} />
{`Button: `}
<Button variant="contained">فونت فارسی</Button>
</Grid>
</Grid>
</Container>
);
}