Adding font url from assets folder

Wappler General
1

Hello,

I can’t understand why i’m receiving a 404 error when linking font from assets folder, anyone know how to fix this?

GET http://localhost:12345/css/assets/typeface/SFRounded-Bold.ttf net::ERR_ABORTED 404 (Wappler: Not Found)

<p class="font-weight-5">test</p>

.font-weight-5 { font-family: SFRounded-Bold;}

@font-face {
    font-family: "SFRounded-Bold";
    src: local("SFRounded Bold"), local("SFRounded-Bold"), url("assets/typeface/SFRounded-Bold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

image
image795×167 21.6 KB

2

I also have the font installed on my computer so it should still preview correctly by using src local option but it doesnt work either.

My assets folder is located inside of www for mobile project, so it should be available right??

If I load the font with external source it works fine, I have been using this before but I want to host the fonts within the application in case of offline and cleared cache.

3

Are you sure this is the correct folder?

http://localhost:12345/css/assets/

and shouldn’t it be:

http://localhost:12345/assets/
4

Thanks for the reply, I didn’t notice that css in the localhost url. My assets folder is not located in css.
As you can see in the css, I set the url src like this:

url("assets/typeface/SFRounded-Bold.ttf")

5

Ok, probably that's the problem :slight_smile:
This path is relative to the file you are using it in - that's why it looks for the font in the css folder, as your css file is located there :slight_smile:
So make sure to properly define it, relative to your css file or just change it to site root relative: url("/assets/typeface/SFRounded-Bold.ttf")

1 Like
6

Thank you :slight_smile:

1 Like