如何在Material-UI主题中导入和使用自定义字体？

Question

我正在尝试在Material-UI主题的React应用程序中导入并使用Yellowtail字体（来自Google字体）。

据我所知，所有谷歌字体都在npm上，我已经安装了它，

npm install typeface-yellowtail-保存

命令。

我已将其导入App.js，并将其放在主题的字体系列部分中，并将主题传递给MuiThemeProvider，但它不起作用。我错过了什么？

这就是我在App.js中的内容（标题包含带有一些网格的AppBar，正文仅包含用于测试的h1文本）

import React, { Component, Fragment } from 'react';
import Header from './Components/Layouts/Header';
import AppBody from './Components/Layouts/AppBody';
import Footer from './Components/Layouts/Footer'; 
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core';
import 'typeface-yellowtail';

const theme = createMuiTheme({  
  typography: {
    fontFamily: 
      '"Yellowtail", cursive',
  },
});

class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <Header />
        <AppBody />
        <Footer />       
      </MuiThemeProvider>
    );
  }
}

export default App;

Answer 1

您可以先加载 CSS 文件，而不是通过 npm 安装。

@import url('https://fonts.googleapis.com/css?family=Yellowtail&display=swap');

导入这个 CSS 文件

import './assets/css/yellowtail.css';

现在你不需要使用任何@font-face。这可以像平常一样与字体系列一起使用。

Answer 2

你错过了三件事：

• 将 npm 包导入为某个东西
• 使用CssBaseline组件
• 添加一个override到提供给的对象createMuiTheme()

参见示例：

import React, { Component, Fragment } from 'react';
import Header from './Components/Layouts/Header';
import AppBody from './Components/Layouts/AppBody';
import Footer from './Components/Layouts/Footer'; 
import { MuiThemeProvider, createMuiTheme, CssBaseline } from '@material-ui/core';
import yellowtail from 'typeface-yellowtail';

const theme = createMuiTheme({  
  typography: {
    fontFamily: 
      '"Yellowtail", cursive',
  },
  overrides: {
    MuiCssBaseline: {
      '@global': {
        '@font-face': [yellowtail],
      },
    },
  },
});

class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <CssBaseline />
        <Header />
        <AppBody />
        <Footer />       
      </MuiThemeProvider>
    );
  }
}

export default App;

CodeSandbox 示例（MUI v3）：https://codesandbox.io/s/late-pond-gqql4? file=/index.js

示例 CodeSandbox (MUI v4)：https://codesandbox.io/s/pense-monad-eqwlx? file=/index.js

笔记

• MuiThemeProviderThemeProvider从 Material-UI v3 到 v4 的过渡中更改为。如果您使用的是 v4，这是唯一需要的更改 - 此示例代码在两个版本上都适用。

• 您必须将文本包装在 Material-UI 的Typography组件中才能使用字体。