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

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

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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;