0

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.

enter image description here

_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>
  );
}

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.