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

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

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

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.