¿Cómo aplico un tema de fuente en React Material-UI?

Solución:

Las otras respuestas no parecen funcionar para Material-UI v1. Esto es lo que funcionó para mí:

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

Aquí hay otro ejemplo para anular la fuente mientras se usa el tema oscuro:

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

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

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

La documentación de tipografía para v1 está aquí, aunque tuve problemas para hacer funcionar el ejemplo: https://material-ui-1dab0.firebaseapp.com/customization/themes#typography

Si solo está buscando cambiar la fuente de su tema material-ui, cambie muiTheme en el MuiThemeProvider componente de proveedor. Los documentos tienen un ejemplo aquí: http://www.material-ui.com/#/customization/themes

Debería verse algo como esto:

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

Tenga en cuenta que la mayoría de los componentes tenían que actualizar sus fuentes, pero agregué fontFamily al div adjunto (como se ve arriba) también para que todos se actualicen (encabezados específicamente para mí).

Si se pregunta qué más puede anular, probablemente sea más fácil mirar el código (https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js) donde se define

Me di cuenta de esto. Hice 2 cosas, la primera de las cuales creo que no importó:

Cambié a usar un tema sin formato completo, luego implementé un componente como este:

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

La segunda cosa, que probablemente fue la culpable, fue escapar del espacio en 'PT Sans', como sigue:

//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, un error tan mundano y poco interesante como podrías esperar.

---

---

Utiliza Nuestro Buscador