How can I use multiple fonts with MUI?

Using multiple fonts with MUI (Material-UI) involves configuring the theme provider to include the desired font families. Here's a comprehensive guide:

1. Import Fonts:

First, you need to import your desired fonts. This can be done by linking to fonts hosted by a service like Google Fonts, or by using self-hosted font files. For Google Fonts, you'd typically include the link in your index.html file:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700&display=swap" />

Note: Replace the URLs above with the links for your specific fonts. You can find these links on the Google Fonts website.

2. Customize the MUI Theme:

Next, you need to customize the MUI theme to specify the font families you want to use. You do this by creating a theme object and providing it to the ThemeProvider component.

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  typography: {
  fontFamily: [
   'Roboto',
   '"Open Sans"',
   'Arial',
   'sans-serif'
  ].join(','),
  h1: { fontFamily: 'Roboto' },
  h2: { fontFamily: '"Open Sans"' },
  // Add more typography variants if needed
  },
});

In the code above, 'Roboto' is set as the primary font, with 'Open Sans' as the secondary. The fontFamily in the typography object will be applied as default to most of MUI components. If you need to set fonts for specific variants you can do it like for h1 and h2.

3. Wrap Your App with ThemeProvider:

Wrap your root component with the ThemeProvider and pass your custom theme to it:

import App from './App';
import { ThemeProvider } from '@mui/material/styles';
import theme from './theme'; // Import the custom theme you created before
ReactDOM.render(
  <ThemeProvider theme={theme}>
  <App />
  </ThemeProvider>,
  document.getElementById('root')
);

4. Using Fonts in Your Components:

With the theme configured, MUI components will now inherit the specified font families. If you need to override font styles for particular components, you can use the sx prop.

5. Handling Different Weights:

To use different font weights, make sure you import the corresponding font weights from Google Fonts. If you are self-hosting fonts, you must provide files for each weight you need. The styling will need to be set either within the theme, or component's style.

By following these steps, you can use multiple fonts effectively with MUI, customizing your design to fit your brand or design needs. This ensures your application remains both functional and visually appealing.

Learn more about this