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
tag
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)
