Rmwc: How to customize the font family for the whole RMWC?

[puru0019]

[jamesmfriedman]

There is no font family specified other than the mdc-typography class on the body attempts to load the roboto font. In your own CSS just point .mdc-typography to your font of choice.

[puru0019]

Does that apply every where for example on the buttons or on the form fields?

[jamesmfriedman]

It should apply to everything. There aren’t any fonts hardcoded

[puru0019]

I think the fonts are hared coded. I applied my desired font family to .mdc-typography and its not applying to few components such as button, modal and form components, Because they have separate class names with Roboto as font (i.e .mdc-button has font-family as Roboto)

[jamesmfriedman]

Just went to verify this, you are absolutely correct. You can open an issue up with material-components-web and link this issue. I think you're right, they should all obey whatever is set for mdc-typography

[puru0019]

Any update on this bug?

[jamesmfriedman]

Again this is an issue with material components web, not RMWC. I see you opened an issue but it appears you did so on a fork of material components web, not the real project.

At the end of the day this is just CSS, you can use standard css selectors to change the fonts to whatever you want. Just find the rules that are currently applying Roboto and override them.

[anthonysapien]

In the meantime, this worked for me:
https://stackoverflow.com/a/49601716

Updated to use "mdc-"

[class^='mdc-'], [class*=' mdc-'] {
    font-family: 'Source Sans Pro', sans-serif;
  }
  .material-icons {
    font-family: 'Material Icons';
  }

[jamesmfriedman]

Thanks for posting the example @anthonysapien thats exactly what I was saying but not showing 😜

[nicholaschiang]

Hey @puru0019 if you want to, you can customize the font-family when importing @material's styling with Sass:

@use '@material/typography' with (
  $font-family: unquote('Poppins, sans-serif'),
);

And then you can import the desired styling beneath that and it should use the font-family specified above:

@use '@material/button/mdc-button';
@use '@material/card/mdc-card';
@use '@material/menu/mdc-menu';

[jamesmfriedman]

Google added a css var for it as well
var(--mdc-typography-font-family,Roboto,sans-serif)

[puru0019]

@jamesmfriedman you are saying, we can override the var with new font family?

[anthonysapien]

hi @puru0019 i was able to set this style globally:

--mdc-typography-font-family: proxima-nova;

[puru0019]

Thank you @anthonysapien and @jamesmfriedman. Should I upgrade my RMWC version to 6.1.0 to apply this change. Currently I am using 5.7.2 version