Hey there, I'm currently working on incorporating Google fonts into a custom Material UI theme as the global font. However, I'm facing an issue where the font-weight setting is not being applied. It seems to only display the normal weight of 400. Interestingly, when I import the bold version of a font file (such as Roboto-bold.woff2) and correctly code it for the bold font, it works fine. The problem lies specifically with the medium font weight not functioning properly. Below is my code snippet:
import { createMuiTheme } from '@material-ui/core';
import RobotoReg from '../font/Roboto-Regular.woff2';
import RobotoMed from '../font/Roboto-Medium.woff2';
const robotoReg: any = {
fontFamily: 'Roboto',
fontStyle: 'normal',
fontDisplay: 'swap',
fontWeight: 400,
src: `
local('Roboto-Regular'),
url(${RobotoReg}) format('woff2')
`,
};
const robotoMed: any = {
fontFamily: 'Roboto',
fontStyle: 'normal',
fontDisplay: 'swap',
fontWeight: 400,
src: `
local('Roboto-Medium'),
url(${RoboroMed}) format('woff2')
`,
};
const theme = createMuiTheme({
typography: {
fontFamily: ['Roboto', 'sans-serif'].join(','),
htmlFontSize: 16,
fontSize: 16,
fontWeightRegular: 400,
fontWeightMedium: 500,
},
overrides: {
MuiCssBaseline: {
'@global': {
'@font-face': [robotoReg, robotoMed],
},
},
},
});
...
The Google font is successfully applied as the global font, but unfortunately, setting font-weight to 500; does not seem to work. Has anyone else experienced this issue? Any help would be greatly appreciated! Thank you in advance.