Material-ui: कस्टम फ़ॉन्ट बदलें/उपयोग करें

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

असल में, ऑनलाइन खोज करने के 6 घंटे के बाद, lib कोड में खुदाई करने और बेतरतीब ढंग से अनुमान लगाने के बाद, मैं इस निष्कर्ष पर पहुंचा: IT IS POSSIBLE! :डी

1. /public . में /फोंट निर्देशिका बनाएं
2. /public/fonts/fonts.css बनाएं, जो @font-faces को परिभाषित करता है:

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

1. <link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css"> को /public/index.html के शीर्ष में जोड़ें

2. हुर्रे!

4/बी. अगर, किसी भी कारण से, यह अभी भी काम नहीं करता है, तो फोंट के एक्सटेंशन को .css में बदलें ( src: url('./OperatorMono.css') पर भी)

1. Google फ़ॉन्ट्स को अपने index.html . में लिंक करें
   <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap" rel="stylesheet">

2. अपनी बॉडी स्टाइल में जोड़ें
   /* Styles */ body { margin: 0 auto; font-family: 'Montserrat'; }

3. app.js . में कुछ बदलाव
   import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

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

/public/index.html


मेरे लिए काम किया :)

असल में, ऑनलाइन खोज करने के 6 घंटे के बाद, lib कोड में खुदाई करने और बेतरतीब ढंग से अनुमान लगाने के बाद, मैं इस निष्कर्ष पर पहुंचा: IT IS POSSIBLE! :डी

1. /public . में /फोंट निर्देशिका बनाएं
2. /public/fonts/fonts.css बनाएं, जो @font-faces को परिभाषित करता है:

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

1. <link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css"> को /public/index.html के शीर्ष में जोड़ें
2. हुर्रे!

4/बी. अगर, किसी भी कारण से, यह अभी भी काम नहीं करता है, तो फोंट के एक्सटेंशन को .css में बदलें ( src: url('./OperatorMono.css') पर भी)

यह काम है !! शुक्रिया।

डिफ़ॉल्ट फ़ॉन्ट बदलने के लिए इन 2 चरणों का पालन करें:

यहाँ मैं डिफ़ॉल्ट फ़ॉन्ट को "ओपन सैंस" में बदल रहा हूँ

1. Google फ़ॉन्ट्स को अपने index.html . में आयात करें
   <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet"/>

2. 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')
);

_कभी-कभी कॉन्फ़िगरेशन के दौरान अनुक्रम मायने रखता है। एक अच्छे अभ्यास के रूप में createMuiTheme _ पर कॉन्फ़िगरेशन के दौरान हमेशा शीर्ष स्तर पर टाइपोग्राफी को परिभाषित करें

मुद्दा:

कॉन्फ़िगरेशन थीम के बाद फ़ॉन्ट-परिवार नहीं मिल रहा है

// 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

समाधान:

// 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],
      },
    },
  },
});

मैं बस अनुक्रम बदलता हूं और सब कुछ ठीक काम कर रहा है।