我正在尝试在 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;
最佳答案
您可以先加载 CSS 文件,而不是通过 npm 安装。
@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/