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

Question

I'm trying to import and use the Yellowtail font (from Google Fonts) in my React app in a Material-UI theme.

As far as i know all google fonts are on npm, I've installed it, with the

npm install typeface-yellowtail --save

command.

I have imported it in App.js, put it in the font-family part of the theme, passed the theme to the MuiThemeProvider, but it does not work. What did I miss?

This is what i have inside of App.js (header contains an AppBar with some grids and body contains only an h1 text for testing)

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 } from '@material-ui/core';
import 'typeface-yellowtail';

const theme = createMuiTheme({  
  typography: {
    fontFamily: 
      '"Yellowtail", cursive',
  },
});

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

export default App;

Answer 1

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.