Unable to override font-family in lightning-input label using LWC styling hooks

Question

How to override the font-family using styling hooks? I tried writing a custom CSS class with --lwc-fontFamily property set to my custom value and applied that CSS class to the lightning input element. However, it defaults to Lato. I checked the CSS in the browser and it seems there is a body{font-family:var(--lwc-fontFamily, Lato) written there. How to achieve this?

I tried something like this

.custom-css{
--lwc-fontFamily:Roboto-Regular;
--lwc-formLabelFontSize:1rem;
--lwc-colorTextLabel:#000000;
}

Answer 1

Well I had made a silly mistake thinking everything needs a styling hook. I wrote something like this

.custom-css{
--lwc-fontFamily:Roboto-Regular; 
--lwc-formLabelFontSize:1rem;
--lwc-colorTextLabel: #000000;
}

Turns out I didnt need to use --lwc-fontFamily. Just font-family would have done the job. But it is weird though. Kept inheriting from

body{
font-family:var(--lwc-fontFamily, Lato);
}

Anyways, the problem was solved using font-family instead of --lwc-fontFamily