web-dev-qa-db-fra.com

Comment importer et utiliser une police personnalisée dans un thème Material-UI?

J'essaie d'importer et d'utiliser la police Yellowtail (de Google Fonts) dans mon application React dans un thème Material-UI).

Pour autant que je sache que toutes les polices google sont sur npm, je l'ai installé, avec le

npm install fonteface-yellowtail --save

commander.

Je l'ai importé dans App.js, je l'ai mis dans la partie famille de polices du thème, j'ai transmis le thème au MuiThemeProvider, mais cela ne fonctionne pas. Qu'est-ce que j'ai raté?

C'est ce que j'ai à l'intérieur d'App.js (l'en-tête contient un AppBar avec quelques grilles et le corps ne contient qu'un texte h1 pour les tests)

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;
reactjsmaterial-designmaterial-uitypographyfont-family
9
boglarkaszell

Au lieu d'installer via npm, vous pouvez tout d'abord charger le fichier CSS.

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

Importez ce fichier CSS

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

Maintenant, vous n'avez plus besoin d'utiliser de @ font-face. Cela peut être utilisé avec des familles de polices comme d'habitude.

4
Nautatava Navlakha