reactjs - 如何在material-ui主题中导入和使用自定义字体？

Question

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

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

npm install typeface-yellowtail --save

命令。

我已经将它导入到App.js中，将其放入主题的font-family部分，将主题传递给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。这可以像普通字体一样使用。