Hello,
I'm attempting to implement a custom font for my application, but for some reason, it's not functioning properly.
This CSS code successfully applies the Montserrat font:
@font-face {
font-family: 'Montserrat';
src: url(/fontapp/Montserrat-VariableFont_wght.ttf) format('truetype');
}
* {
However, I'm encountering issues when trying to apply the Jannat font:
font-family: 'A Jannat LT';
src: url(/MinistryofHealth_CA/AJannatLT.ttf) format('truetype');
Regardsbala
Hi,
Did you already checked if the source URL for the font is correct in the 'A Jannat LT' font?
Hope this can help.
Best regards,
Ricardo
Hello @Ricardo Lopes,
I'm encountering an error when I include spaces in the URL.
Regards, Bala
Replace space in your URL with %20. For example, if your URL is http://example.com/new page, it should be encoded as http://example.com/new%20page.
I am assuming that you have downloaded and are calling the font file from the local resource folder,
but if you haven't done that then I recommend that you do that first as that will be better that calling some online 'url' that can be volatile, then you can just copy the runtime path of the said file and you will be good to go.
Hope it helps.
Regards
im using from resource folder
Hi @Bala Murugan ,
The code you provided for the Montserrat font looks correct, and it's good that it's working as expected. There could be a few reasons why the Jannat font isn't working properly. Here are some things to check:
Font File Path: Double-check the path to your Jannat font file (AJannatLT.ttf). Make sure it's spelled correctly and that the folder structure (/MinistryofHealth_CA/) exists on your web server.
Font File Format: While you've specified format('truetype'), some fonts might require different formats like woff2 or woff. You can try including additional formats like this:
CSS
src: url(/MinistryofHealth_CA/AJannatLT.ttf) format('truetype'),
url(/MinistryofHealth_CA/AJannatLT.woff2) format('woff2');
I hope this helps!