使用自定义字体全局覆盖 Material UI 5.0 版式主题

Question

我目前正在尝试在Material Ui 5.0 中使用两种个人字体。我想通过覆盖theme 在全球范围内应用它们。 我的第一个问题是我什至无法正确加载字体，而且我根本无法更改typography。 此外，使用MUI 5.0，我无法将此自定义字体应用于整个正文部分。 因此，如果使用 <Typography variant='h4'>. or <Box>...</Box> 我的自定义字体不适用。 我在Mui 4.0 中进行全局覆盖的方式在版本 5 中不再有效。 我很生气，因为MUI 5.0 documentation 没有正确或根本没有解释这一点，而且我已经坐了好几个小时了。

我将不胜感激！

我正在使用React, Typescript。

字体.d.ts

 declare module '*.woff'
 declare module '*.ttf'

cssBaseLine.ts

import CustomOneMediumWoff from '../fonts/CustomOne-Medium.woff'
import CustomOneTwomWoff from '../fonts/CustomOne-Twom.woff'

    export const CssBaseline = {
        MuiCssBaseline: {
          
            // '@global': {
            //     html: {
            //       fontFamily: 'CustomOneTwomWoff',
            //       height: '100%',
            //       overflow: 'auto',
            //     },
            //     body: {
            //       fontFamily: 'CustomOneTwomWoff',
            //       height: '100%',
            //       overflow: 'auto',
            //     },
            //     '#root': {
            //       height: '100%',
            //       overflow: 'auto',
            //     },
            //   },
    
        // I did that in MUI 4.0 and it does not work anymore
      // Tho documentation is not explaining the global overwirte part anymore
    
        styleOverrides: `
        @font-face {
            font-family: "CustomOne";
            url(${CustomOneMediumWoff}) format("woff"),
            font-weight: 500;
            font-style: normal;
          }, 
    
          @font-face {
            font-family: "CustomTwo";
            url(${CustomTwoMediumWoff}) format("woff"),
            font-weight: 500;
            font-style: normal;
          }, 
    
      `,
      },
    }
    
    export default CssBaseline

typography.ts 字体不适用

export const typography = {
  fontFamily: ['CustomOne', 'CustomtTwo'].join(','),
  h1: {
    fontFamily: 'CustomOne',
    fontWeight: 500,
  },
  h2: {
    fontFamily: 'CustomOne',
  },
  h3: {
    fontFamily: 'CustomOne',
  },
  h4: {
    fontFamily: 'CustomOne',
  },
  button: {
    fontFamily: 'CustomtTwo',
  },
}

export default typography

主题.ts

export const theme = createTheme({
  palette:palette,
  typography: typography,
  components: {
    ...CssBaseline,
  },
})

export default theme

不起作用并加载默认浏览器字体

     <Typography variant='h4'>Test 4</Typography>
     <Box mt={4}>test Boxssssss H</Box>

App.tsx

 <ThemeProvider theme={theme}>
      <CssBaseline />
....

Answer 1

我没有看到您问题中的代码有任何明显问题，但这里有一个工作示例：

import * as React from "react";
import CssBaseline from "@mui/material/CssBaseline";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
import InspirationTTF from "./Inspiration-Regular.ttf";

const theme = createTheme({
  typography: {
    fontFamily: "Inspiration"
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        "@font-face": {
          fontFamily: "Inspiration",
          src: `url(${InspirationTTF}) format("truetype")`
        },
        body: {
          fontSize: "3rem",
          color: "purple"
        }
      }
    }
  }
});

export default function Demo() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Typography variant="h1">Hello World</Typography>
      <div>Some body text</div>
    </ThemeProvider>
  );
}

相关回答：how to apply global backgroundColor using MuiCssBaseline and styleOverrides

Answer 2

这似乎对我有用

index.html

<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400;1,600@1&display=swap" rel="stylesheet"/>

..

let theme = createTheme({
  typography: {
    serif: {
      fontFamily: '"Lora", serif',
    },
  },
});

...

<Link to="/"
 component={RouterLink} 
 variant="serif"
>
Text
</Link>