Question

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

据我所知，所有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

更新：自@ekkis提到以来，我正在添加有关如何包括Google字体的更多详细信息。以下答案假定您正在使用Material UI v4.10.1

安装gatsby-plugin-web-font-loader以安装Google字体。
编辑gatsby-config.js以包括插件和Google字体。

module.exports = {
  plugins:      [
    {
      resolve: "gatsby-plugin-web-font-loader",
      options: {
        google: {
          families: ["Domine", "Work Sans", "Happy Monkey", "Merriweather", "Open Sans", "Lato", "Montserrat"]
        }
      }
    },
  ]
}

要使用字体，请在theme.js中创建一个名为src/components的文件

import {
  createMuiTheme,
  responsiveFontSizes
} from "@material-ui/core/styles"

let theme = createMuiTheme({
  typography: {
    fontFamily: [
                  "Work Sans",
                  "serif"
                ].join(","),
    fontSize:   18,
  }
})

// To use responsive font sizes, include the following line
theme     = responsiveFontSizes(theme)

export default theme

现在，您已经导出了theme，可以在组件中使用它了。
将theme导入您的组件。假设<Layout />是您的主要组成部分。

// src/components/layout.js

/**
 * External
 */
import React from "react"
import PropTypes from "prop-types"
import {
  ThemeProvider
} from "@material-ui/styles"
import { Typography } from "@material-ui/core"

/**
 * Internal
 */
import theme from "./theme"

const Layout = ({ children }) => {

  return (
    <>
      <ThemeProvider theme={theme}>
        <Typography variant="body1">Hello World!</Typography>
      </ThemeProvider>
    </>
  )
}

要在其他组件中使用Google字体，只需使用

<Typography ...>Some Text</Typography>

只要这些组件用作其父级，这些组件将继续使用Google字体。希望这会有所帮助。

旧答案：

将文本放在Typography组件中，以反映通过npm安装的Google字体

import { Typography } from "@material-ui/core"

假设您在<AppBody>中有一些文字

<AppBody>
    Hello World!
</AppBody>

以上文字现在应更改为

<AppBody>
    <Typography variant="body1">Hello World!</Typography>
</AppBody>

有关不同的变体，请参考Material UI docs。

Answer 3

您缺少三件事：

将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;

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

示例代码沙箱（MUI v4）：https://codesandbox.io/s/pensive-monad-eqwlx?file=/index.js

注释

MuiThemeProvider在从Material-UI v3到v4的过渡中更改为ThemeProvider。如果您使用的是v4，则这是唯一需要的更改-此示例代码否则将在两个版本上均适用。
您必须将文本包装在Material-UI的Typography组件中，才能使用字体。

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

3 个答案: