How do I apply a Font Theme in React Material-UI?

Question

I'm trying to apply a google font to my Material UI react project, but can't seem to get it to take. I'm using Material UI 0.14.2.

My index.html font load: <link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>

My component where I apply the theme:

import ThemeManager from 'material-ui/lib/styles/theme-manager';
import LightRawTheme from 'material-ui/lib/styles/raw-themes/light-raw-theme';

const App = React.createClass({

    childContextTypes: {
        muiTheme: React.PropTypes.object,
    },
    getChildContext: function() {
        return {
            muiTheme: ThemeManager.modifyRawThemeFontFamily(ThemeManager.getMuiTheme(LightRawTheme), 'PT Sans, sans-serif')
        }
    },

...etc etc

}

If anyone lands here, check the accepted answer at [this thread](https://stackoverflow.com/questions/48319372/changing-font-family-of-all-material-uinext-components-and-reboot-in-material-u) — Chriss Hd, Jul 11 '18 at 16:24

score 11 · Accepted Answer · answered Jul 30 '17 at 19:38

The other answers don't seem to work for Material-UI v1. Here's what worked for me:

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}>

Here's another example for overriding the font while using the dark theme:

const theme = (() => {
  const palette = createPalette({
    type: 'dark',
  });

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

  return createMuiTheme({
    palette: palette,
    typography: typography,
  });
})();

The typography documentation for v1 is here although I had trouble getting the example working: https://material-ui-1dab0.firebaseapp.com/customization/themes#typography

Nick Brady · Answer 2 · 2017-06-08T16:41:16.977

If you're just looking to change the font of your material-ui theme, change muiTheme in the MuiThemeProvider provider component. The docs have an example here: http://www.material-ui.com/#/customization/themes

Should look something like this:

App.css

/* Load in your font */
@import url('https://fonts.googleapis.com/css?family=Lato');

App.js

// App.js
import './App.css'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

const font = "'Lato', sans-serif"; 

const muiTheme = getMuiTheme({
  fontFamily: font
});

function App(props) {
  return(
    <MuiThemeProvider muiTheme={muiTheme}>
      <div style={{fontFamily: font}}>...</div>
    </MuiThemeProvider>
  );
}

Note most of the components had to have their fonts updated, but I added fontFamily to the enclosing div (as seen above) as well in order for all to be updated (headers specifically for me).

If you're wondering what else you can override, it is probably easiest to just look at the code (https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js) where it is defined

Thank you, this worked really well for me. My material-ui version is: ^0.18.0 — marcopeg, Jun 08 '17 at 14:05

score 4 · Answer 3 · answered Apr 04 '16 at 01:43

I figured this out. I did 2 things, the first of which I don't think mattered:

I switched to using a full raw theme, then implementing in-component like this:

getChildContext: function() {
        return {
            muiTheme: ThemeManager.getMuiTheme(rawTheme)
        }
    },

The second thing, which was more likely the culprit, was escaping the space in 'PT Sans', as follows:

//theme.js
import Colors from 'material-ui/lib/styles/colors';
import ColorManipulator from 'material-ui/lib/utils/color-manipulator';
import Spacing from 'material-ui/lib/styles/spacing';
import zIndex from 'material-ui/lib/styles/zIndex';

export default {
    spacing: Spacing,
    zIndex: zIndex,
    fontFamily: 'PT\ Sans',
    palette: {
        primary1Color: Colors.cyan500,
        primary2Color: Colors.cyan700,
        primary3Color: Colors.lightBlack,
        accent1Color: Colors.pinkA200,
        accent2Color: Colors.grey100,
        accent3Color: Colors.grey500,
        textColor: Colors.darkBlack,
        alternateTextColor: Colors.white,
        canvasColor: Colors.white,
        borderColor: Colors.grey300,
        disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
        pickerHeaderColor: Colors.cyan500,
    }
};

Voila, as mundane and uninteresting a bug as you could hope for.

score 2 · Answer 4 · answered Mar 23 '19 at 06:23

I'm using Material-UI version 3.9.2. I found this work-around.

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'

const theme = createMuiTheme({
    palette: {
        primary: { main: '#228e22' },
        secondary: { main: '#4d4d4d' },
    },
    typography: {
        useNextVariants: true,
        fontFamily: '"Montserrat", Arial, Helvetica, sans-serif',
    },
})

const Base = () => (
   <MuiThemeProvider theme={theme}>
       <Typography component="h1" variant="h1">
           Hello
        </Typography>
    </MuiThemeProvider>
)

Mohammad · Answer 5 · 2019-07-30T21:11:09.033

I use The bellow code and the result was successful. write the javascript bellow code in your own file and then write the @font-face in its CSS file:

import './App.css';
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import createPalette from '@material-ui/core/styles/createPalette';
import createTypography from '@material-ui/core/styles/createTypography';

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

function App() {
  return(
    <MuiThemeProvider theme={theme}>
    
    </MuiThemeProvider>
  );
}

@font-face{
  font-family: "IRANSansWeb";
  src: url('./fonts/iransans/ttf/IRANSansWeb.ttf') format('ttf'),
  url('./fonts/iransans/eot/IRANSansWeb.eot') format('eot'),
  url('./fonts/iransans/woff/IRANSansWeb.woff') format('woff'),
  url('./fonts/iransans/woff2/IRANSansWeb.woff2') format('woff2')
}

This works for me in applying custom fonts. Thanks Mohammad – Balogun Ridwan Ridbay Jul 17 '20 at 11:31 — Balogun Ridwan Ridbay, Jul 17 '20 at 11:31

score 0 · Answer 6 · answered Nov 10 '21 at 22:35

After update Material UI to:

"@mui/icons-material": "^5.0.4",
"@mui/lab": "^5.0.0-alpha.51",
"@mui/material": "^5.0.4",
"@mui/styles": "^5.0.1",

In your theme.js

import { createTheme } from "@mui/material/styles";

// Create a theme instance.
const theme = createTheme({
  typography: {
    fontFamily: '"Merienda", cursive',
  },
  palette: {
    primary: {
       main: "rgb(68, 139, 68)",
    },
    secondary: {
      main: "rgb(141, 202, 141)",
      // contrastText: "#fff",
    },
    spacing: 24,
  },
});


export default theme;

How do I apply a Font Theme in React Material-UI?

6 Answers6