Как импортировать и использовать пользовательский шрифт в теме Material-UI? - PullRequest
Новая
       83

Как импортировать и использовать пользовательский шрифт в теме Material-UI?

5 голосов
/ 28 сентября 2019

Я пытаюсь импортировать и использовать шрифт Yellowtail (из Google Fonts) в своем приложении React в теме Material-UI.

Насколько я знаю, все шрифты Google находятся на npm, ямы установили его с помощью команды

npm установить гарнитуру-yellowtail --save

.

Я импортировал ее в App.js, поставилон в части темы font-family передал тему MuiThemeProvider, но она не работает.Что я пропустил?

Это то, что у меня есть внутри App.js (заголовок содержит панель приложений с несколькими сетками, а тело содержит только текст 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;

1 Ответ

3 голосов
/ 28 сентября 2019

Вместо установки через npm, вы можете сначала загрузить CSS-файл. 

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

Импортировать этот CSS-файл 

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

Теперь вам не нужно использовать какой-либо @font-лицо.Это можно использовать с семействами шрифтов, как обычно.

...