我正在尝试在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;
Run Code Online (Sandbox Code Playgroud)