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 '21 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 '21 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 '21 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 '21 at 15:04
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.