Material-ui: 更改/使用自定义字体

http://www.material-ui.com/#/customization/themes

其实，经过6个小时的网上搜索，挖掘lib代码并随机猜测，我得出的结论是： IT IS POSSIBLE！ :D

1. 在 /public 中创建 /fonts 目录
2. 创建/public/fonts/fonts.css ，它定义了@font-faces：

@font-face {
  font-family: 'inglobal';
  font-weight: normal;
  font-style: normal;
  src: url('./inglobal.ttf');
}

1. 将<link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css">添加到 /public/index.html 的头部

2. 欢呼！

4/b。 如果出于任何原因，它仍然不起作用，请将字体的扩展名更改为 .css（也在src: url('./OperatorMono.css')处）

1. 在 index.html 中链接谷歌字体
   <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap" rel="stylesheet">

2. 添加你的体型
   /* Styles */ body { margin: 0 auto; font-family: 'Montserrat'; }

3. app.js 中的一些变化
   import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({ typography: { fontFamily: [ 'Montserrat' ].join(','), }, })

/public/index.html


为我工作:)

其实，经过6个小时的网上搜索，挖掘lib代码并随机猜测，我得出的结论是： IT IS POSSIBLE！ :D

1. 在 /public 中创建 /fonts 目录
2. 创建/public/fonts/fonts.css ，它定义了@font-faces：

@font-face {
  font-family: 'inglobal';
  font-weight: normal;
  font-style: normal;
  src: url('./inglobal.ttf');
}

1. 将<link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css">添加到 /public/index.html 的头部
2. 欢呼！

4/b。 如果出于任何原因，它仍然不起作用，请将字体的扩展名更改为 .css（也在src: url('./OperatorMono.css')处）

这是工作 ！！ 谢谢你。

请按照以下 2 个步骤更改默认字体：

在这里，我将默认字体更改为“Open Sans”

1. 在 index.html 中导入 Google 字体
   <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet"/>

2. 在 index.js 中做这些改变

import { ThemeProvider } from '@material-ui/styles';
import { CssBaseline } from '@material-ui/core';
import { createMuiTheme } from '@material-ui/core';

const theme = createMuiTheme({ typography: { fontFamily: [ 'Open Sans' ].join(','), }, })

ReactDOM.render(
        <ThemeProvider theme={theme}>
                        <CssBaseline />
            <App />
        </ThemeProvider>,
    document.getElementById('root')
);

_有时顺序在配置过程中很重要。 作为一种好的做法，始终在createMuiTheme的配置期间在顶层定义排版_

问题：

配置主题后没有得到 font-family

// Create a theme instance.
const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#2991d6",
    },
    secondary: {
      main: "#19857b",
    },
    error: {
      main: red.A400,
    },
    background: {
      default: "#fff",
    },
  }, typography: {
    fontFamily: "VarelaRound,sans-serif",
  },
  overrides: {
    MuiCssBaseline: {
      "@global": {
        "@font-face": [varelaRound],
      },
    },
  },
});

Note: In this case Material UI using Roboto as the default font

解决方案：

// Create a theme instance.
const theme = createMuiTheme({
  typography: {
    fontFamily: "VarelaRound,sans-serif",
  },
  palette: {
    primary: {
      main: "#2991d6",
    },
    secondary: {
      main: "#19857b",
    },
    error: {
      main: red.A400,
    },
    background: {
      default: "#fff",
    },
  },
  overrides: {
    MuiCssBaseline: {
      "@global": {
        "@font-face": [varelaRound],
      },
    },
  },
});

我只是改变了顺序，一切正常。