Menu
Trying to configure Material theme to use my own font and custom font weights/sizes for the Typography components. For the fontWeight section, I want to just be able to input 100/200/300/400/500/600/700 as options for each specific material typography variant, however, it specifically takes in a "string" and it apparently can only be normal/bold/bolder/lighter
And to make it worse normal == 400 while bold == 700 skipping over 500 and 600 which I need
typography: {
fontFamily: "MyCustomFont",
fontWeightLight: 200,
fontWeightRegular: 400,
fontWeightMedium: 500,
useNextVariants: true,
h1: {
fontSize: "1.25rem",
fontWeight: "bold",
lineHeight: "1.2em"
},
h2: {
fontSize: "1.75rem",
fontWeight: "normal",
lineHeight: "1.2em"
},
}
862
MUI Typography font weight can be set to bold by adding fontWeight: bold value to the sx prop. Here is example code: <Typography sx={{fontWeight: 'bold'}}>My Text</Typography> .
To self-host fonts, download the font files in ttf , woff , and/or woff2 formats and import them into your code. ⚠️ This requires that you have a plugin or loader in your build process that can handle loading ttf , woff , and woff2 files. Fonts will not be embedded within your bundle.
You can import <Typography /> component from @mui/material using the following code. import Typography from '@mui/material/Typography'; // or import { Typography } from '@mui/material'; Important Props and its values: align: It is used to align the text on the component.
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
194
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
