0

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;
}
4
  • What code did you write, specifically?
    – sfdcfox
    Oct 6, 2021 at 14:52
  • Please edit your question to add the code you have tried so far - even if it does not work - and exactly (e.g., exact error text, details on unexpected behavior) how it is not working. (From What topics can I ask about here?: "Your question should include ...(the code, metadata, or design, in its current form). ... ")
    – Moonpie
    Oct 6, 2021 at 15:00
  • @sfdcfox What an honor to get a comment from the legendary sfdcfox :) 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)} Oct 6, 2021 at 15:01
  • Thanks for the compliment! Please do remember to edit your code into the question if you still need help, or you can self-answer if you figured out the problem.
    – sfdcfox
    Oct 6, 2021 at 15:04

1 Answer 1

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .