Material-ui: change default font family

[aminkhademian]

how to change default font family for all components ?!!

[oliviertassinari]

@aminkhademian We have a documentation example for this: https://material-ui.com/customization/typography/

This changes the typography of all the Material-UI components.

const theme = createMuiTheme({
  typography: {
    // Use the system font.
    fontFamily:
      '-apple-system,system-ui,BlinkMacSystemFont,' +
      '"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif',
  },
})

If you want to also impact the typography outside of Material-UI, at the document level, you can use the CssBaseline component.

[support[bot]]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[AntonioRedondo]

@oliviertassinari this doesn't set a global font type to all text elements within a <MuiThemeProvider>. You have to wrap all texts within a <Typography> HOC, which is quite repetitive when you only want to inherit styles.

The solution is to resort to add classes with className or inline styles on parent components: https://material-ui.com/customization/overrides

[oliviertassinari]

@AntonioRedondo I don't understand your point. We have no <typography> Higher order component. Would you mind providing more detail?

[AntonioRedondo]

https://material-ui.com/api/typography (call it simply component)

[oliviertassinari]

@AntonioRedondo I don't understand. What's preventing you from setting a global font? Material-UI tries to promote isolation with this Typography component.

[AntonioRedondo]

I think what the original poster is asking is about some functionality similar to styled-components createGlobalStyle() with which from the styling library you can set global styles without using conventional classes and CSS.

[oliviertassinari]

@AntonioRedondo It's already available:

import { withStyles } from '@material-ui/core/styles';

export default withStyles({
  '@global': {
    body: {
      fontFamily: 'Arial',
    },
  },
})(() => null);

[AntonioRedondo]

This looks 🆒. I cannot see it on the Material-UI website. Is it documented anywhere?

[oliviertassinari]

It's from http://cssinjs.org/jss-global?v=v3.0.0

[longnt80]

It's from http://cssinjs.org/jss-global?v=v3.0.0

Here's the new url: https://cssinjs.org/jss-plugin-global/?v=v10.0.0-alpha.10

[jaycc008]

@oliviertassinari in what file can this be used? I can't seem to find any context in de documentation on the website either.

[oliviertassinari]

@jaycc008 ?

[jaycc008]

import { withStyles } from '@material-ui/core/styles';

export default withStyles({
  '@global': {
    body: {
      fontFamily: 'Arial',
    },
  },
})(() => null);

This above code, how do I implement this in any file? I am trying to change the default font from Roboto to Noto Sans, but I don't understand where I can add this code to make Noto Sans the default font.

[oliviertassinari]

@jaycc008 Don't, follow https://github.com/mui-org/material-ui/issues/9988#issuecomment-359438928.