Material-ui: Multiple Fonts in one theme

[nausik]

Hi!

I met a need of using multiple fonts in one theme (i.e. I have multiple components that use a Monospaced font instead of Regular), but since has set number of variants and it's impossible to add new, what is the proper way to add support for the second font in theme file?

Don't want to set fontFamily in component, cause it kills the whole idea of theming, imo

[oliviertassinari]

Nothing prevents you from using two different fonts. You can override different part of the theme:

• theme.typography.fontFamily: this is the default font, Roboto, changing it will impacts all the components.
• theme.typography.VARIANT_NAME.fontFamily: each variant can have a different font, it will impact the built-in typography.
• theme.typography.fontFamilyMonospaced: you can add a new property in the theme, and use it where needed.