How to configure MUI v5 custom font-family? - material-ui

Question

I have the following:
cont theme = createTheme({
typography: {
allVariants: MetricFontFaces,
fontFamily: 'MetricHPEXS'
} as TypographyOptions,
components: {
MuiFormControl: {
styleOverrides: {
root: {
fontFamily: 'MetricHPEXS'
}
}
},
MuiInput: {
styleOverrides: {
root: {
fontFamily: 'MetricHPEXS'
},
formControl: {
fontFamily: 'MetricHPEXS'
},
input: {
fontFamily: 'MetricHPEXS'
}
}
},
MuiOutlinedInput: {
styleOverrides: {
input: {
fontFamily: 'MetricHPEXS'
}
}
}
}
});
Then I try to use it like this in my storybook:
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
{story()}
<TextField value="sdasdasd" />
</ThemeProvider>
</StyledEngineProvider>
The custom font-family is not applying.
How do I properly create the MUI v5 theme such that all components will accept the same custom font?

Answer 1

In the end, we applied the font settings directly onto the MuiCssBaseline in order to have everything else pick up the font-family. Example:
import { TypographyOptions } from '#mui/material/styles/createTypography';
export const muiThemeOptions = {
typography: {
fontFamily: 'MetricHPEXS'
} as TypographyOptions,
components: {
MuiCssBaseline: {
styleOverrides: MetricFontFaces // <== here
},
...
}
}
Where MetricFontFaces is a giant string with all of the #font-face defined. While this worked on applying the font globally, but because MetricFontFaces is a string, we couldn't apply other CSS styling easily. There is no simple way (at least I could not find them) to supply #font-face via the MuiCssBaseline.