How to add custom font weights to Material UI?
I am using the same behavior, with numbers, tested with all the 100/200/300/400/500/600/700
and it worked as well:
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core/';
const THEME = createMuiTheme({
typography: {
"fontFamily": "\"MyCustomFont\"",
"fontSize": 20,
"lineHeight": 1.5,
"letterSpacing": 0.32,
useNextVariants: true,
suppressDeprecationWarnings: true,
h6: {
"fontWeight": 600,
},
},
});
<MuiThemeProvider theme={THEME}>
<Typography variant="h6" color="inherit" align="center" style={{ margin: "1rem" }}>
"Some text"
</Typography>
</MuiThemeProvider>
The Box
element can help. Ignore the Typography
element.
See the code example below
<Box fontWeight="fontWeightLight">…
<Box fontWeight="fontWeightRegular">…
<Box fontWeight="fontWeightMedium">…
<Box fontWeight={500}>…
<Box fontWeight="fontWeightBold">…
See official docs for more details