自托管在Material-UI中添加的字体无法正常工作？

Question

我正在开发一个基于Material-UI的项目，并尝试添加一些自托管字体，因为它们不是谷歌字体。我已经按照Material-UI和JSS文档的要求进行了操作，但是我无法找到原因，为什么它仍然不能工作。也没有错误提示让我知道出了什么问题。

import { createMuiTheme } from "@material-ui/core/styles";
import Windlass from "./fonts/Windlass.eot";
import Windlass2 from "./fonts/Windlass.woff";

const theme = createMuiTheme({
  ...
  typography: {
    useNextVariants: true,
    fontFamily: [
      'Windlass',
      'Helvetica Neue',
      'Helvetica'
    ].join(','),
    fontSize: 16,
    fontWeightLight: 400,
    fontWeightRegular: 400,
    fontWeightMedium: 600,
    fontWeightBold: 700},
  overrides: {
    MuiCssBaseline: {
      '@global': {
        '@font-face': {
          fontFamily: 'Windlass',
          src: `url(${Windlass})`,
          fallbacks: [
            {src: `url(${Windlass}?#iefix) format(embedded-opentype)`},
            {src: `url(${Windlass2}) format(woff)`}
          ]
          }
        }
      }
  }
});

export default theme;

字体名称似乎在我检查元素时出现在CSS中。

font-family: Windlass,Helvetica Neue,Helvetica;

但是文本显示为Helvetica Neue。

- sailorMoon

Answer 1

如果有人偶然看到这篇文章，以下是另一种将字体添加到Material UI主题的方法。我遵循了MUI网站的步骤。

https://material-ui.com/customization/typography/

///myAwesomeFont.ts
import myAwesomeFontEot from '../assets/fonts/myAwesomeFont.eot';
import myAwesomeFontWoff from '../assets/fonts/myAwesomeFont.woff';
import myAwesomeFontWoff2 from '../assets/fonts/myAwesomeFont.woff2';


import myAwesomeFontBoldEot from '../assets/fonts/myAwesomeFont-Bold.eot';
import myAwesomeFontBoldWoff from '../assets/fonts/myAwesomeFont-Bold.woff';
import myAwesomeFontBoldWoff2 from '../assets/fonts/myAwesomeFont-Bold.woff2';


const myAwesomeFontRegular = {
  fontFamily: 'myAwesomeFont',
  fontStyle: 'normal',
  fontWeight: 400,
  src: `local('myAwesomeFont-Regular'), 
  url(${myAwesomeFontEot}),
  url(${myAwesomeFontWoff}) format('woff'),
  url(${myAwesomeFontWoff2}) format('woff2')`,
};

const myAwesomeFontBold = {
  fontFamily: 'myAwesomeFont',
  fontStyle: 'normal',
  fontWeight: 700,
  src: `local('myAwesomeFont-Bold'), 
  url(${myAwesomeFontEot}),
  url(${myAwesomeFontWoff}) format('woff'),
  url(${myAwesomeFontWoff2}) format('woff2')`,
};

export default [myAwesomeFontRegular, myAwesomeFontBold]

在你的主题提供者文件中。

//default.theme.ts
import { createMuiTheme, Theme } from '@material-ui/core/styles';
import myAwesomeFontArray from './myAwesomeFont';


const theme: Theme = createMuiTheme({
typography: {
    fontFamily: "myAwesomeFont, sans-serif",
    fontSize: 16
},
  overrides: {
    MuiCssBaseline: {
      '@global': {
        '@font-face': [...myAwesomeFontArray],
      },
    },
  },
});

在您完成这些设置后，打开浏览器的开发者工具，验证它们确实已被下载。这对我有效，希望对您也有效。

- jriver27

---

我一直收到“模块解析失败：意外字符''（1:4）”的错误提示。 您可能需要一个适当的加载器来处理此文件类型，目前没有配置任何加载器来处理此文件。请参阅https://webpack.js.org/concepts#loaders。 - insivika

@insivika 我需要更多的信息。如果您还没有找到解决方案，请提交问题。 - jriver27

Answer 2

这是我的配置，它能够正常工作。你需要在index.css中声明字体，类似于这样的格式。

theme.js

import { createMuiTheme } from "@material-ui/core/styles";
// import gliberPath from "./Gilbert_Bold-Preview_1004.woff2"; // this is no need to add
let palette1 = {
  type: "light"
};

let palette2 = {
  type: "light"
};


// this is no need to add 
// const gliber = {
//   fontFamily: "Gliber",
//   fontStyle: "normal",
//   fontDisplay: "swap",
//   fontWeight: 400,
//   src: `
//       local('Gliber'),
//       url(${gliberPath}) format('woff2')
//     `,
// };

const typography = {
  fontFamily: ["Gliber","Roboto"].join(","), // there need add Gliber reference,your font family name should be place the first position
 // this is no need to add
  // overrides: {
  //   MuiCssBaseline: {
  //     "@global": {
  //       "@font-face": ['Gliber']
  //     }
  //   }
  // }
};

let theme1 = createMuiTheme({ palette: palette1, typography });

let theme2 = createMuiTheme({ palette: palette2, typography });

export { theme1, theme2 };

index.css

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}
/*add self host font */
@font-face {
    font-family: 'Gliber';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./theme/Gilbert_Bold-Preview_1004.woff2') format('woff2');
  }

- kun shao