CODEWITHSUNDEEP
cssreactjsmaterial-uifont-family
hossein fti
hossein fti

Reputation: 1720

React 18 - MUI - change font family

I create a theme to change the default font family of MUI But it didn't work.

this is my theme component:

import { createTheme } from "@mui/material/styles";

const theme = createTheme({
  typography: {
    fontFamily: ["samim", "vazir"].join(","),
  },
});

export default theme;

I use the theme component in my main app.tsx to change the font in all parts of my project

import React from "react";
import { ThemeProvider } from "@material-ui/styles";
import theme from "./theme/theme";
import Routes from "./routes/Routs";

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Routes />;
    </ThemeProvider>
  );
};

export default App;

can anyone help me, please?

Upvotes: 1

Views: 7077

Answers (3)

Hamed Siaban
Hamed Siaban

Reputation: 1682

The best way to change the font family of entire project is using MUI's CSSBaseline.

theme.ts:

import { createTheme } from '@mui/material/styles';
import samim from "./assets/fonts/samim.ttf";

const theme = createTheme({
   typography: {
    "fontFamily": `"samim", "vazir"`,   
   }, 
   components: {
    MuiCssBaseline: {
      styleOverrides: `
        @font-face {
          font-family: 'samim';
          font-style: normal;
          font-display: swap;
          font-weight: 400;
          src: local('samim'), local('samim'), url(${samim}) format('truetype');
          unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
        }
      `,
    },
});

app.tsx:

import React from "react";
import { ThemeProvider } from "@material-ui/styles";
import theme from "./theme/theme";
import Routes from "./routes/Routs";

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Routes />;
    </ThemeProvider>
  );
};

export default App;

Upvotes: 4

Bhavesh Daswani
Bhavesh Daswani

Reputation: 725

Created Code sandbox Demo for customizing Material UI Theme, Demo Link

You would need to use Typography component where you are using text for theme part to take effect

Link from official Docs https://mui.com/material-ui/customization/typography/

Also, you would need to import ThemeProvider from @mui/material/styles

Upvotes: 1

Super Toptal
Super Toptal

Reputation: 587

You can try this.

Prepare theme component like below.

import { createTheme } from '@mui/material/styles';
const theme = createTheme({
   typography: {
    "fontFamily": `"samim", "vazir"`,   
   }
});

Then you can apply this in app.js like below.

    import theme from "./theme/theme";
    import Routes from "./routes/Routes";
    import { ThemeProvider } from '@mui/material/styles';

    const App = () => (
      <ThemeProvider theme={theme}>
         <Routes />;
      </ThemeProvider>
    );

ReactDOM.render(<App />, document.getElementById('app'));
``

I guess that issue was belong to ThemeProvider...

Upvotes: 3

Related Questions