Changing font family of all MUI components
ReactjsMaterial UiReactjs Problem Overview
Can we change the font family of MUI components with less code. I have tried many ways but still, I can't able to do it. I have to change the font family individually which is really a lot of work. Are there any other ways to do that?
Reactjs Solutions
Solution 1 - Reactjs
You can change the font in material-ui@next library doing the following. Suppose in your <App />
which is defined like the following
// Material UI
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
const App = () => (
<MuiThemeProvider theme={THEME}>
<Provider store={store}>
<Router history={appHistory} routes={Routes} />
</Provider>
</MuiThemeProvider>
);
ReactDOM.render(<App />, document.getElementById('app'));
In the theme
prop for MuiThemeProvider
you provide the following where
const THEME = createMuiTheme({
typography: {
"fontFamily": `"Roboto", "Helvetica", "Arial", sans-serif`,
"fontSize": 14,
"fontWeightLight": 300,
"fontWeightRegular": 400,
"fontWeightMedium": 500
}
});
Then somewhere in your css
or your main index.html
file include this @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
For a list of all params you can give to createMuiTheme
Default Theme Params Regarding the docs itself for changing the MuiTheme they are as follows. Themes Material UI Next
Regarding the <Reboot />
part you can have a look at the documentation here Material UI Reboot Details
Solution 2 - Reactjs
**** UPDATES *****
Adding to the accepted answer by Adeel.
For the latest Material-UI(v4+) components, the imports, as well as MuiThemeProvider
, have been changed.
So now in your App.js
, do the following:
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import './Styles/App.css';
const theme = createMuiTheme({
typography: {
fontFamily: [
'Nunito',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif'
].join(','),
}
});
class App extends Component {
render() {
return (
<ThemeProvider theme={theme}>
<div className="App">
<MainApp />
</div>
</ThemeProvider>
);
}
}
export default App;
Now for example, I've added the Nunito
font. So I had to add the same to the App.css
(which is being imported in App.js
) in the following way:
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Nunito Regular'), local('Nunito-Regular'),
url(https://fonts.gstatic.com/s/nunito/v11/XRXV3I6Li01BKofINeaBTMnFcQ.woff2)
format('woff2');
unicode-range: 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, U+FFFD;
}
Solution 3 - Reactjs
In MUI v5, also make sure ThemeProvider and createTheme is imported from @mui/material/styles
and not from @mui/styles
. I was stuck for hours thinking why it's not working.
import { ThemeProvider, createTheme } from '@mui/styles'; ❌
import { ThemeProvider, createTheme } from '@mui/material/styles'; ✅
const theme = createTheme({
typography: {
allVariants: {
fontFamily: 'serif',
textTransform: 'none',
fontSize: 16,
},
},
});
function App() {
return (
<ThemeProvider theme={theme}>
...
</ThemeProvider>
);
}
Solution 4 - Reactjs
Hoping this can help someone...you need to be really careful with commas and brackets when declaring your styles within createMuiTheme
It's really easy to mess this up. For instance, palette is one big object...so is typography, make sure everything is in the right place. I had random problems caused by doing this wrong.
palette: {
primary: {
light: '#ff8e8c',
main: '#ff5a5f',
dark: '#c62035',
contrastText: '#fff',
},
secondary: {
light: '#4da9b7',
main: '#017a87',
dark: '#004e5a',
contrastText: '#000',
},
},
typography: {
fontFamily: "'Montserrat', sans-serif",
textTransform: "none",
button: {
textTransform: "none",
},
Solution 5 - Reactjs
This is now the preferred method:
const theme = createMuiTheme({
typography: {
fontFamily: [
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(','),
},
});
As noted here: https://material-ui.com/customization/typography/
Solution 6 - Reactjs
In MUI v5, you can update the fontFamily
or any other CSS properties of all Typography
variants easily:
const theme = createTheme({
typography: {
allVariants: {
fontFamily: 'serif',
},
},
})
To change the fontFamily
dynamically in your app, you can use useMemo
to create a new theme
object based on the latest fontFamily
value:
const defaultFontFamily = 'serif';
const [fontFamily, setFontFamily] = React.useState(defaultFontFamily);
const theme = React.useMemo(
() =>
createTheme({
typography: {
allVariants: { fontFamily },
},
}),
[fontFamily],
);
return (
<div>
<Select
defaultValue={defaultFontFamily}
onChange={(e) => setFontFamily(e.target.value)}
>
<MenuItem value="serif">serif</MenuItem>
<MenuItem value="sans-serif">sans-serif</MenuItem>
</Select>
<ThemeProvider theme={theme}>
<Content />
</ThemeProvider>
</div>
);
Live Demo
Solution 7 - Reactjs
This seem to work for me
GlobalStyleOverrides.js
import { createTheme, responsiveFontSizes } from '@mui/material/styles';
export default function GlobalStyleOverrides() {
const theme = createTheme({
typography: {
fontFamily: [
'"Bebas Neue"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif',
].join(','),
body1: {
fontFamily: "'Poppins', Arial, sans-serif",
},
},
components: {
MuiButton: {
variants: [
{
props: { variant: 'contained' },
style: {
textTransform: 'none',
border: `10px dashed red`,
},
},
],
},
},
});
return responsiveFontSizes(theme);
}
App.js
import GlobalStyleOverrides from 'components/_base/global-style-overrides/GlobalStyleOverrides';
...
function App() {
return (
<ThemeProvider theme={GlobalStyleOverrides()}>
<Router>
...
</Router>
</ThemeProvider>
);
}