导入新字体系列并覆盖 @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/material v5+

Answer 1

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

我建议使用 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>
);