I am using createMuiTheme
to set customize my theme with Material UI. How do I set a specific font for the header, body, and button tags?
I'm assuming it would be customizing the typography component in the theme. And then selecting it from the App component. But can't find any documentation regarding this.
Theme file:
import { createMuiTheme } from "@material-ui/core/styles";
export default createMuiTheme({
typography: {
fontFamily: ["campton-book", "campton-light", "campton-medium"].join(",")
//something here setting specific font family for specific tags?
}
});
import React, { Component } from "react";
import PropTypes from "prop-types";
import { withStyles, MuiThemeProvider } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import Theme from "../Theme";
const styles = theme => ({
root: {
flexGrow: 1
}
});
class Tools extends Component {
render() {
const { classes } = this.props;
return (
<MuiThemeProvider theme={Theme}>
<Typography variant="h2">Some text here as h2 and the "campton-light" font family</Typography>
<Typography variant="body1">Some text here as body1 and the "campton-book" font family</Typography>
<Typography variant="overline">Some text here as overline and the "campton-medium" font family</Typography>
</MuiThemeProvider>
);
}
}
Apps.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(Apps);
Set the font as a constant in your App.js file After that, set that constant to fontFamily in your createMuiTheme constant. That handles using that font as your global font for the app.
You can import <Typography /> component from @mui/material using the following code. import Typography from '@mui/material/Typography'; // or import { Typography } from '@mui/material'; Important Props and its values: align: It is used to align the text on the component.
Method 1: Use Google Fonts CDN To be able to use the fonts, you'll have to initialize it using the CreateMuiTheme which is an API provided by Material UI that generates a custom theme based on the options received and ThemeProvider which is a component used to inject custom themes into your application.
gutterBottom: { marginBottom: '0.35em', }, paragraph: { marginBottom: 16, }, Second,paragraph is used to choose the basic component of Typography. If paragraph is true ,the Typography is "p".
Below is the syntax for controlling the font-family for different text variants.
The easiest way to look at the properties available in the theme is to look at the structure of the default theme: https://material-ui.com/customization/default-theme/
const theme = createMuiTheme({
typography: {
h1: {
fontFamily: "Comic Sans MS"
},
h2: {
fontFamily: "Arial"
},
h3: {
fontFamily: "Times New Roman"
},
h4: {
fontFamily: "verdana"
},
button: {
fontFamily: "Comic Sans MS"
}
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With