Material-ui: [Typography] Custom font family

[urkopineda]

I would like to use Product Sans in the project, but Typography component uses Roboto by default and can't be changed.

• [ ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Current Behavior

Steps to Reproduce (for bugs)

Codesandbox link

1. Go to the codesandbox page.
2. Inspect the title element and go to the typography class (for example, '.MuiTypography-display1-15')
3. Uncheck the css row that contains font family (font-family: "Roboto", "Helvetica", "Arial", sans-serif;)
4. Now you can see what Product Sans looks like in the title.

Context

I would like to use the new typography from Google. I know that, at this point, using Product Sans in Material Design it's not "official" but I think it would be a good idea to have the flexibility to choose what fonts to use in the Typography element.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.35 |
| React | 16.2.0 |
| browser | Chrome 64.0.3282.186 |

[oliviertassinari]

Typography component uses Roboto by default and can't be changed

@urkopineda It can be changed. The best solution is to use the option we provide to do so. It's documented:
https://material-ui-next.com/customization/themes/#typography

const theme = createMuiTheme({
  typography: {
    fontFamily: '"Product Sans", serif',
  },
});

[huyvlam]

Typography component uses Roboto by default and can't be changed

@urkopineda It can be changed. The best solution is to use the option we provide to do so. It's documented:
https://material-ui-next.com/customization/themes/#typography

const theme = createMuiTheme({
  typography: {
    fontFamily: '"Product Sans", serif',
  },
});

This method has limit however. When I apply theme to the root component, it applied to the root component and its direct children, however, deeply nested components that are imported by children component did not inherit the theme. In a large app, it would be nice to apply the theme once in one root component rather then many time in many components. Can this feature be improved to have a global and private scope?

[oliviertassinari]

however, deeply nested components that are imported by children component did not inherit the theme

@huyvlam It should be working, it's the nominal use case. We don't encourage the creation of many theme providers in the application.

[huyvlam]

@oliviertassinari Indeed, found the issue: I used ThemeProvider as a wrapper, and inside I included MuiCSSBaseline like this:

<ThemeProvider><Grid><MuiCSSBaseline /></Grid></ThemeProvider>

I was able to make it work buy rearraning them like: .

Thanks for your help.

[realisation]

@huyvlam rearranging them like how?

[huyvlam]

@huyvlam rearranging them like how?

<Grid>
  <MuiCSSBaseline />
  <ThemeProvider>
    <PageComponent/>
  </ThemeProvider>
</Grid>