导入新的字体系列并覆盖@mui/material字体系列组件

Question

我想在字体文件夹中导入一个新的字体家族，并覆盖mui基本字体家族。

import { responsiveFontSizes, createTheme } from '@mui/material';
import NEWFONTFAMILLY from '../fonts/something.otf'
const theme = responsiveFontSizes(
createTheme({
components: {
MuiCssBaseline: {
styleOverrides: {
fontFamily: [NEWFONTFAMILLY],
},
},
},
})
);
export default theme;

如果我使用这些代码，则应用mui字体系列，而不是我的：

@font-face {
font-family: 'NEWFONTFAMILLY';
src: url(../fonts/something.otf) format('opentype');
}
* {
font-family: 'NEWFONTFAMILLY';
}

有人能帮帮我吗？

我使用@mui/材料v5+

Answer 1

我已经按照MUI文档中的示例实现了这一点：

我建议使用WOFF2或WOFF文件，不确定它是否适用于OTF。

// first import your font file
import RalewayWoff2 from './fonts/Raleway-Regular.woff2';
const theme = createTheme({
// override the theme fontFamily
typography: {
fontFamily: 'Raleway, Arial',
},
components: {
MuiCssBaseline: {
// add font-face to MuiCssBaseline component
styleOverrides: `
@font-face {
font-family: 'Raleway';
font-style: normal;
font-display: swap;
font-weight: 400;
src: local('Raleway'), local('Raleway-Regular'), url(${RalewayWoff2}) format('woff2');
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;
}
`,
},
},
});

然后，当你想添加包装在主题中的组件时，你可以这样使用：

return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Box
sx={{
fontFamily: 'Raleway',
}}
>
Raleway
</Box>
</ThemeProvider>
);

Answer 2

尝试使用稍微不同的语法：

createTheme({
components: {
MuiCssBaseline: {
styleOverrides: {
'@font-face': NEWFONTFAMILLY,
},
},
},
})