Material-ui: Modifier/utiliser une police personnalisée

http://www.material-ui.com/#/customization/themes

En fait, après 6 heures de recherche en ligne, à creuser dans le code lib et à deviner au hasard, la conclusion à laquelle je suis arrivé : C'EST POSSIBLE ! :RÉ

1. créer le répertoire /fonts dans /public
2. créer /public/fonts/fonts.css , qui définit les @font-faces :

@font-face {
  font-family: 'inglobal';
  font-weight: normal;
  font-style: normal;
  src: url('./inglobal.ttf');
}

1. ajouter <link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css"> à la tête de /public/index.html

2. Hourra!

4/b. Si, pour une raison quelconque, cela ne fonctionne toujours pas, changez les extensions des polices en .css (également à src: url('./OperatorMono.css') )

1. lier les polices google dans votre index.html
   <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap" rel="stylesheet">

2. Ajoutez votre style corporel
   /* Styles */ body { margin: 0 auto; font-family: 'Montserrat'; }

3. quelques changements dans app.js
   import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({ typography: { fontFamily: [ 'Montserrat' ].join(','), }, })

/public/index.html


a fonctionné pour moi :)

En fait, après 6 heures de recherche en ligne, à creuser dans le code lib et à deviner au hasard, la conclusion à laquelle je suis arrivé : C'EST POSSIBLE ! :RÉ

1. créer le répertoire /fonts dans /public
2. créer /public/fonts/fonts.css , qui définit les @font-faces :

@font-face {
  font-family: 'inglobal';
  font-weight: normal;
  font-style: normal;
  src: url('./inglobal.ttf');
}

1. ajouter <link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css"> à la tête de /public/index.html
2. Hourra!

4/b. Si, pour une raison quelconque, cela ne fonctionne toujours pas, changez les extensions des polices en .css (également à src: url('./OperatorMono.css') )

C'est du travail !! Merci.

Suivez ces 2 étapes pour changer la police par défaut :

Ici, je change la police par défaut en "Open Sans"

1. Importez Google Fonts dans votre index.html
   <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet"/>

2. Est-ce que ces changements dans index.js

import { ThemeProvider } from '@material-ui/styles';
import { CssBaseline } from '@material-ui/core';
import { createMuiTheme } from '@material-ui/core';

const theme = createMuiTheme({ typography: { fontFamily: [ 'Open Sans' ].join(','), }, })

ReactDOM.render(
        <ThemeProvider theme={theme}>
                        <CssBaseline />
            <App />
        </ThemeProvider>,
    document.getElementById('root')
);

_Parfois, la séquence est importante lors de la configuration. En tant que bonne pratique, définissez toujours la typographie au niveau supérieur lors de la configuration sur createMuiTheme _

Publier:

Après que le thème de configuration n'obtienne pas la famille de polices

// Create a theme instance.
const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#2991d6",
    },
    secondary: {
      main: "#19857b",
    },
    error: {
      main: red.A400,
    },
    background: {
      default: "#fff",
    },
  }, typography: {
    fontFamily: "VarelaRound,sans-serif",
  },
  overrides: {
    MuiCssBaseline: {
      "@global": {
        "@font-face": [varelaRound],
      },
    },
  },
});

Note: In this case Material UI using Roboto as the default font

Solution:

// Create a theme instance.
const theme = createMuiTheme({
  typography: {
    fontFamily: "VarelaRound,sans-serif",
  },
  palette: {
    primary: {
      main: "#2991d6",
    },
    secondary: {
      main: "#19857b",
    },
    error: {
      main: red.A400,
    },
    background: {
      default: "#fff",
    },
  },
  overrides: {
    MuiCssBaseline: {
      "@global": {
        "@font-face": [varelaRound],
      },
    },
  },
});

Je viens de changer la séquence et tout fonctionne bien.