1

I wanted to create a LWC that should be used as a kind of Web2Case form on the website of a customer. Technically, everything is working but I cannot change the font of the LWC to match the font of the website. What I did so far:

  1. I created an Aura app that works as a dependency app.
<aura:application description="ReklamationsformularOut" access="GLOBAL" extends="ltng:outApp" implements="ltng:allowGuestAccess">
    <aura:dependency resource="c:reklamationsFormular"/>
</aura:application>
  1. I uploaded the font as a static resource. enter image description here

  2. I have created the LWC that uses some sample lightning-input fields.

<template>
    <lightning-input class="input-field" label="Kundennummer:"  required="true"
    ></lightning-input>
    <lightning-input class="input-field" label="Firmenname:"
    ></lightning-input>
</template>
  1. According to some videos I saw, I have added a CSS file to the LWC like the following:
@font-face {
    font-family: "Mont Book";
    src: url(/resource/MontBookFont) format("TrueType");
}

.input-field {
    font-family: "Mont Book", sans-serif;
}

If i use the component within Salesforce, the fields render correctly with the selected font. enter image description here However, if I run the same form via Lightning Out, it doesn't render using the custom font. Does anybody know how to apply the custom font to the component when rendering via Lightning Out?

2
  • Did you make the static resource public? Mar 11 at 11:55
  • Hi @RahulGawale, yes I made the static resource public. Mar 12 at 9:34

1 Answer 1

1

I figured out how to solve this. The fonts need to be stored on a publicly accessible website on the webserver and not loaded as a static resource. The css of the LWC then looks similar like this: enter image description here If you do so, the component renders with the correct font. For example the first three lines are Mont-Book while the fourth line is still Salesforce. enter image description here

3
  • 1
    Technically you can store the font in a static resource, but you'd still need to use the full url to the resource in your css. That would mean you'd have to update your component every time you updated the static resource.
    – H Alves
    Mar 12 at 10:51
  • As a side note, I watched the Lighting Out session at TDX 24, and in an upcoming release, they are going to add a parameter so you can use a link to an external CSS file for the Lighting Out definition for this use case Mar 12 at 12:56
  • @HAlves I tried to take the full URL to the static resource and this works within Salesforce Lightning but it does not work in Lightning Out. Weird. Mar 23 at 6:33

You must log in to answer this question.

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