Warum sind wir gezwungen, Schriftarten zu verwenden, die mit Material-UI gebündelt sind?
Gibt es eine Möglichkeit, dies zu entfernen oder zu konfigurieren?
Tatsächlich bin ich nach 6 Stunden Online-Suche, Graben in Lib-Code und zufälligem Raten zu dem Schluss gekommen: ES IST MÖGLICH! :D
/public/fonts/fonts.css
, das die @font-faces definiert:@font-face {
font-family: 'inglobal';
font-weight: normal;
font-style: normal;
src: url('./inglobal.ttf');
}
fügen Sie <link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css">
zum Kopf von /public/index.html hinzu
Hurra!
4/b. Wenn es aus irgendeinem Grund immer noch nicht funktioniert, ändern Sie die Erweiterungen der Schriftarten in .css (auch unter src: url('./OperatorMono.css')
).
verlinke google fonts in deiner index.html
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap" rel="stylesheet">
Fügen Sie Ihren Körperstil hinzu
/* Styles */
body {
margin: 0 auto;
font-family: 'Montserrat';
}
einige Änderungen in app.js
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
const theme = createMuiTheme({
typography: {
fontFamily: [
'Montserrat'
].join(','),
},
})
/public/index.html
hat bei mir funktioniert :)
Tatsächlich bin ich nach 6 Stunden Online-Suche, Graben in Lib-Code und zufälligem Raten zu dem Schluss gekommen: ES IST MÖGLICH! :D
- /fonts-Verzeichnis in /public erstellen
- erstelle
/public/fonts/fonts.css
, das die @font-faces definiert:@font-face { font-family: 'inglobal'; font-weight: normal; font-style: normal; src: url('./inglobal.ttf'); }
- fügen Sie
<link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css">
zum Kopf von /public/index.html hinzu- Hurra!
4/b. Wenn es aus irgendeinem Grund immer noch nicht funktioniert, ändern Sie die Erweiterungen der Schriftarten in .css (auch unter
src: url('./OperatorMono.css')
).
Es ist Arbeit !! Danke schön.
Befolgen Sie diese 2 Schritte, um die Standardschriftart zu ändern:
Hier ändere ich die Standardschriftart in "Open Sans"
Importieren Sie Google Fonts in Ihre index.html
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet"/>
Nehmen Sie diese Änderungen in index.js vor
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')
);
_Manchmal kommt es bei der Konfiguration auf die Reihenfolge an. Als gute Praxis definieren Sie Typografie immer auf der obersten Ebene während der Konfiguration auf createMuiTheme _
Nach der Konfiguration erhält das Thema keine Schriftfamilie
// 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],
},
},
},
});
Ich ändere einfach die Reihenfolge und alles funktioniert gut.
Hilfreichster Kommentar
Tatsächlich bin ich nach 6 Stunden Online-Suche, Graben in Lib-Code und zufälligem Raten zu dem Schluss gekommen: ES IST MÖGLICH! :D
/public/fonts/fonts.css
, das die @font-faces definiert:fügen Sie
<link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css">
zum Kopf von /public/index.html hinzuHurra!
4/b. Wenn es aus irgendeinem Grund immer noch nicht funktioniert, ändern Sie die Erweiterungen der Schriftarten in .css (auch unter
src: url('./OperatorMono.css')
).