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

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

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



命令。

我已将其导入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;

最佳答案

无需通过npm安装，只需先加载CSS文件即可。

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

导入此CSS文件

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

现在，您无需使用任何@ font-face。可以像普通字体一样使用字体系列。

关于reactjs - 如何在Material-ui主题中导入和使用自定义字体？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58145998/