1

I am trying to load a font in a LWC via the following css code:

@font-face {
    font-family: 'montserrat_custom';
    src: url('/resource/publicsite/MontserratRegular');
    src: url('/resource/publicsite/MontserratRegular') format('TrueType'),
        url('/resource/publicsite/MontserratRegular') format('embedded-opentype'),
        url('/resource/publicsite/MontserratRegular') format('woff2'),
        url('/resource/publicsite/MontserratRegular') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

The problem is that when the LWC loads and compile the CSS returns in the console the error ERR_ABORTED 503 (Service Unavailable).

It's the whole day I am trying to solve this but I was not able to. What i have checked is the following:

  • The resource is present at the right endpoint via the classic download link;
  • The resource has public cache control;
  • I tried to put the file extension in the css iIreported above but nothing changes;
  • I tried tu use, instead of /resource/publicsite/MontserratRegular, /sfsites/c/resource/publicsite/MontserratRegular but nothing changes;

Something to report is that the LWC is used in a public site and it is directly used into it and additionally in the connectedCallback I load the style via the classic loadStyle function by salesforce.

Anyone has some idea that I can try to correctly loads the font? Thank you in advance!

1 Answer 1

0

I found out how to solve it! Actually I had to load the fonts in the visualforce page and then apply the font-family in the css of the LWC page. The only tweak I had to do is that in the visualforce the font has to be loaded with "{!URLFOR($Resource.NameOfResource, 'fontOfInterest.ExtensionOfTheFont')}"

In my case I had to include in the visualforce the following code

<apex:stylesheet value="{!URLFOR($Resource.publicsite, 'style.css')}"/>
<style>
    @font-face {
        font-family: 'montserrat_custom';
        src: url("{!URLFOR($Resource.publicsite, 'fonts/MontserratRegular.eot')}");
        src: url("{!URLFOR($Resource.publicsite, 'fonts/MontserratRegular.eot?#iefix')}") format('embedded-opentype'),
            url("{!URLFOR($Resource.publicsite, 'fonts/MontserratRegular.ttf')}") format('TrueType'),
            url("{!URLFOR($Resource.publicsite, 'fonts/MontserratRegular.woff2')}") format('woff2'),
            url("{!URLFOR($Resource.publicsite, 'fonts/MontserratRegular.woff')}") format('woff');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

You must log in to answer this question.

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