How to import and use a custom font in a material-ui theme?

Instead of installing via npm, you can just first load CSS file.

@import url('https://fonts.googleapis.com/css?family=Yellowtail&display=swap');

Import this CSS file

import './assets/css/yellowtail.css';

Now you don't need to use any @font-face. This can be used with font families like normal.

You are missing three things:

• Import the npm package as something
• Use the CssBaseline component
• Add an override to the object provided to createMuiTheme()

See example:

import React, { Component, Fragment } from 'react';
import Header from './Components/Layouts/Header';
import AppBody from './Components/Layouts/AppBody';
import Footer from './Components/Layouts/Footer'; 
import { MuiThemeProvider, createMuiTheme, CssBaseline } from '@material-ui/core';
import yellowtail from 'typeface-yellowtail';

const theme = createMuiTheme({  
  typography: {
    fontFamily: 
      '"Yellowtail", cursive',
  },
  overrides: {
    MuiCssBaseline: {
      '@global': {
        '@font-face': [yellowtail],
      },
    },
  },
});

class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <CssBaseline />
        <Header />
        <AppBody />
        <Footer />       
      </MuiThemeProvider>
    );
  }
}

export default App;

Example CodeSandbox (MUI v3): https://codesandbox.io/s/late-pond-gqql4?file=/index.js

Example CodeSandbox (MUI v4): https://codesandbox.io/s/pensive-monad-eqwlx?file=/index.js

Notes

• MuiThemeProvider changed to ThemeProvider in the transition from Material-UI v3 to v4. If you are on v4, this is the only change needed - this example code otherwise works on both versions.

• You must wrap text in Material-UI's Typography component for the font to be used.