How can I use my custom fontfamilies in my react app - reactjs

Question

This is my theme.ts file where I created my Muitheme and my fontfamily
import 'typeface-inconsolata'
import 'typeface-quicksand'
import { createMuiTheme, responsiveFontSizes } from '#material-ui/core'
import indigo from '#material-ui/core/colors/indigo'
import yellow from '#material-ui/core/colors/pink'
import red from '#material-ui/core/colors/red'
const theme = createMuiTheme({
typography: {
fontFamily: 'typeface-inconsolata, typeface-quicksand',
fontSize: 17,
fontWeightLight: 300,
fontWeightRegular: 400,
fontWeightMedium: 500,
},
palette: {
primary: indigo,
secondary: red,
error: yellow,
// Used by `getContrastText()` to maximize the contrast between the background and
// the text.
contrastThreshold: 4,
// Used to shift a color's luminance by approximately
// two indexes within its tonal palette.
// E.g., shift from Red 500 to Red 300 or Red 700.
tonalOffset: 0.6,
},
})
export const responsiveTheme = responsiveFontSizes(theme)
This is my App.tsx file where my component is, so I want to change the fonts of the words in the Appbar and in the Grid
import {
AppBar,
Card,
CardHeader,
Container,
createStyles,
Grid,
makeStyles,
Toolbar,
Typography,
} from '#material-ui/core'
import CssBaseline from '#material-ui/core/CssBaseline'
import { ThemeProvider } from '#material-ui/styles'
import React, { FC } from 'react'
import logo from '../icons/logo.svg'
import { responsiveTheme } from '../theme'
const useStyles = makeStyles(theme =>
createStyles({
main: {
height: '90vh',
background: `url(${logo}) no-repeat center / 200px`,
marginTop: theme.spacing(10),
},
})
)
const App: FC = () => {
const classes = useStyles()
return (
<ThemeProvider theme={responsiveTheme}>
<CssBaseline />
<Container maxWidth="lg">
<AppBar color="secondary" position="fixed">
<Toolbar>
<Typography variant="h6" noWrap>
Projektvorlage
</Typography>
</Toolbar>
</AppBar>
<div className={classes.main}>
<Grid container spacing={2} justify="center">
{['Pfannkuchen', 'Pizza', 'Salat', 'Nudeln mit Tomatensauce'].map(
recipe => (
<Grid key={recipe} item xs={12} md={6} lg={4}>
<Card>
<CardHeader title={recipe} />
</Card>
</Grid>
)
)}
</Grid>
</div>
</Container>
</ThemeProvider>
)
}
export default App
So basically I want to change the fonts of the texts but I dont know how to use my fontfamily. There are "variants" but I don't understand what they mean exactly, Im new to react/typescript.

Answer 1

If you want to continue introducing styles via Material-UI, what I would do is create myself in the parent that wraps all the global styles, like the following ones:
globalStyles.styles.tsx
import { createStyles } from "#material-ui/core/styles";
export const globalStyles = (theme: Theme) => createStyles({
"#global": {
body: {
maxHeight: "100vh",
margin: 0,
fontFamily:
},
"#root": {
maxHeight: "100vh",
},
});
app.component.tsx
const AppInner: React.FC<AppProps> = props => { ... };
const App = withStyles(globalStyles)(AppInner);
PD: App component must be inside of <ThemeProvider theme={responsiveTheme}>...</ThemeProvider>