Im So confused with this, I have tried a lot of ways but none of them seems to work for me.

The resource is named "IBMPlexSerif", its file is a .zip named "IBMPlexSerif", When I double-click the zip, there is a folder inside it with the same name "IBMPlexSerif", that folder contains a bunch of .ttf files:

  • IBMPlexSerif-Medium
  • IBMPlexSerif-Bold
  • IBMPlexSerif-Light
  • IBMPlexSerif-Thin

... all of them .ttf

I'm specifically interested in IBMPlexSerif-Light.ttf one. That's the one I want to use in my LWC


this is the way I'm trying to reference it in my css:

@font-face {
    font-family: "IBMPlexSerif";
   src: url("/resource/IBMPlexSerif/IBMPlexSerif/IBMPlexSerif-Light.ttf") format("truetype");

 p {
    font-family: "IBMPlexSerif";
    font-size: 1.2em;
    margin: 0;
    line-height: 1.2;
    margin-top: 3%;

But the LWC is not taking it, it just puts times new roman or whatever standard font it is.

What Am I doing Wrong?

I dont know if I am missing something in the .js using loader function, or if I just dont need that. Or if I should not be using double quotes to reference the resource path.

This LWC is supposed to be embedded in a community page, Does that have anything to do with the issue?

Also this is the error logged in console that the component throws:

....my.site.com/resource/IBMPlexSerif/IBMPlexSerif/IBMPlexSerif-Light.ttf net::ERR_ABORTED 503 (Service Unavailable)

1 Answer 1


You really are 99% already there. Just cut out the second "IBMPlexSerif" from the url...


... and it will work - in communities too. Depending on your users, you might want to adjust system permissions of profiles or cache control (see for example here). The name of the original file is of no importance anymore.

(To my knowledge, the 503 status would indicate that there's another problem though - on the side of Salesforce. You should simply have got a 404 using the url that you state in your text. This might have hampered your testing.)

You must log in to answer this question.

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