Change font family Material-UI

Question

I am struggling to change the font family on Material-UI. I am trying to set it for the whole project using MuiTheme. How can I do this using a font from Google Fonts?

Have you looked at this answer ? https://stackoverflow.com/a/48319568/3694016 — chaosifier, Nov 24 '18 at 02:50
Yes, the problem comes on the CSS file where it throws an error that the file is incompatible — carloscc, Nov 24 '18 at 07:03
Does this answer your question? [changing font family of all material-ui(version 1) components](https://stackoverflow.com/questions/48319372/changing-font-family-of-all-material-uiversion-1-components) — Francis Rodrigues, Dec 11 '19 at 20:38

score 0 · Answer 1 · answered Nov 24 '18 at 14:59

0

Someone did this in another topic

import { createMuiTheme } from 'material-ui/styles';
import createPalette from 'material-ui/styles/palette';
import createTypography from 'material-ui/styles/typography';

const theme = createMuiTheme({
  typography: createTypography(createPalette(), {
  fontFamily: '"Comic Sans"',
  })
});

class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>

answered Nov 24 '18 at 14:59

VersifiXion

2,152
5
22
40

3

How do I import from Google Fonts there? – carloscc Nov 25 '18 at 00:30
@carloscc Did you found out? – Feb 24 '20 at 23:09

score 0 · Answer 2 · answered Apr 15 '23 at 00:14

First, choose the Google Font you want to use and import it into your project. You can do this by adding a link to the Google Fonts CSS file in the section of your HTML file, or by using a package like google-fonts-loader to import the font dynamically in your code.

Once you have the font imported, you can create a new MuiTheme object with the createMuiTheme() function provided by Material-UI.

In the MuiTheme object, you can specify the font family to use for the various typography components in your project. For example, to set the font family for the body text, you can set the body1 property to an object with a fontFamily property that specifies the name of the font you imported. Here's an example:

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

const theme = createMuiTheme({
  typography: {
    fontFamily: 'Roboto, sans-serif', // default Material-UI font
    body1: {
      fontFamily: 'Open Sans, sans-serif', // your chosen Google Font
    },`enter code here`
    // You can also set the font family for other typography variants, like body2, h1, h2, etc.
  },
});

Once you have created the MuiTheme object, you can use it to wrap your app or specific components using the ThemeProvider component provided by Material-UI. Here's an example:

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

// Wrap your app or specific components with the ThemeProvider
const App = () => {
  return (
    <ThemeProvider theme={theme}>
      {/* Your app or components */}
    </ThemeProvider>
  );
};

Change font family Material-UI

2 Answers2