Objective: My goal is to customize the default font in MUI themes.
Issue: Despite reviewing MUI documentation and conducting research on Stack Overflow, I am facing difficulty overriding a custom font globally across my theme.
Theme setup:
import { createTheme } from "@mui/material/styles";
import VCRMonoWoff2 from './fonts/VcrMono.woff2';
import VCRMonoWoff from './fonts/VcrMono.woff';
const theme = createTheme({
typography: {
fontFamily: 'VCRMono',
},
components: {
MuiCssBaseline: {
styleOverrides: `
@font-face {
font-family: 'VCRMono';
font-weight: normal;
font-style: normal;
src: url(${VCRMonoWoff2}) format('woff2'), url(${VCRMonoWoff}) format('woff');
unicodeRange: 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;
}
`,
},
},
});
export default theme;
Implementation:
import { ThemeProvider } from 'react-bootstrap';
import { CssBaseline } from '@mui/material';
import Box from '@mui/material/Box';
import theme from './theme';
export default function Example() {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Box>Example3</Box>
</ThemeProvider>
);
}
Despite implementing this code, the new font doesn't reflect in my theme's typography. However, when using the following snippet, the font changes to VCRMono:
export default function Example() {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Box sx={{
fontFamily: 'VCRMono',
}}>Example3</Box>
</ThemeProvider>
);
}
Unfortunately, this approach doesn't fulfill my objective of globally overriding the default font.
The MUI Self Hosted Fonts Documentation suggests: "you need to change the theme to use this new font. In order to globally define as a font face, the CssBaseline component can be used." Despite attempting to follow these instructions, I was unable to achieve the desired result.
Any assistance would be greatly appreciated. Thank you.