Kevin Powell - Community•2y ago

React (Vite) importing your own fonts

I've been trying to get my fonts to work in my project for a few days now but I keep getting errors. Even though they work locally, I keep getting these errors:

downloadable font: download failed (font-family: "Inter" style:normal weight:400 stretch:100 src index:1): status=2147746065 source: http://localhost:5173/fonts/Inter-VariableFont_slnt_wght.ttf

downloadable font: download failed (font-family: "ClashDisplay" style:normal weight:400 stretch:100 src index:1): status=2147746065 source: http://localhost:5173/fonts/ClashDisplay-Variable.ttf

downloadable font: download failed (font-family: "coolvetica condensed rg" style:normal weight:400 stretch:100 src index:1): status=2147746065 source: http://localhost:5173/fonts/coolvetica_condensed_rg.ttf

downloadable font: download failed (font-family: "Inter" style:normal weight:400 stretch:100 src index:1): status=2147746065 source: http://localhost:5173/fonts/Inter-VariableFont_slnt_wght.ttf

downloadable font: download failed (font-family: "ClashDisplay" style:normal weight:400 stretch:100 src index:1): status=2147746065 source: http://localhost:5173/fonts/ClashDisplay-Variable.ttf

downloadable font: download failed (font-family: "coolvetica condensed rg" style:normal weight:400 stretch:100 src index:1): status=2147746065 source: http://localhost:5173/fonts/coolvetica_condensed_rg.ttf

I've tried not importing them in Main.tsx, importing them in Main.tsx, setting them as a variable vs not setting them as a variable. Tried just putting them in /src and putting them in assets. So far most solutions seem to work fine locally (again, with an error) but once it's hosted online they just don't work.

28 Replies

b1mind•2y ago

for them to be at the / root dir on hosting need to be shipped in public I think don't quote me on that cause I don't use Vite with react but. https://vitejs.dev/guide/assets.html also they work locally because your machine has them installed probably? cause that error is local

aevitasOP•2y ago

Hmm that might be, these font errors are new to me. Well screw me sideways, I think that worked

b1mind•2y ago

I mean it wont be *hashed so I'd say /public/fonts/ is a safe bet oh nice!

aevitasOP•2y ago

Man this took me way too long and I just didn't try this - thank you

b1mind•2y ago

np! glad it was simple as that 😄

aevitasOP•2y ago

Yeah 😄 Got happy a bit too fast..

downloadable font: rejected by sanitizer (font-family: "coolvetica condensed rg" style:normal weight:400 stretch:100 src index:1)

downloadable font: rejected by sanitizer (font-family: "coolvetica condensed rg" style:normal weight:400 stretch:100 src index:1)

VSC screams this:

Assets in public cannot be imported from JavaScript.
Instead of /public/fonts/coolvetica_condensed_rg.ttf, put the file in the src directory, and use /src/fonts/coolvetica_condensed_rg.ttf instead.

Assets in public cannot be imported from JavaScript.
Instead of /public/fonts/coolvetica_condensed_rg.ttf, put the file in the src directory, and use /src/fonts/coolvetica_condensed_rg.ttf instead.

But what VSC suggests is what I tried earlier Ok..

b1mind•2y ago

import it in the index.html entry point then?

aevitasOP•2y ago

Finally got it

b1mind•2y ago

hah what worked?

aevitasOP•2y ago

Stupid brain thought

import "../public/fonts/coolvetica_condensed_rg.ttf";

import "../public/fonts/coolvetica_condensed_rg.ttf";

Would convert to

import "/fonts/coolvetica_condensed_rg.ttf";

import "/fonts/coolvetica_condensed_rg.ttf";

But just putting it like that works fine

b1mind•2y ago

ooo yea right

aevitasOP•2y ago

In main.tsx

b1mind•2y ago

all /public/ assets import at root so /

aevitasOP•2y ago

Yeah I somehow thought this would be fine while developing and convert when building - but guess not 😄

b1mind•2y ago

yea understandable hehe That's where reading the docs help >.>;;

You should always reference public assets using root absolute path - for example, public/icon.png should be referenced in source code as /icon.png

aevitasOP•2y ago

Fair enough - I googled it but should have started there..

b1mind•2y ago

I'm not sure what side effect loading them vanilla index.html would be but that is also an option? maybe not cause the path glad you re got it 😄

aevitasOP•2y ago

I think that wouldn't work as index.html is not inside public - not sure though

b1mind•2y ago

yea

aevitasOP•2y ago

I kind of figured that'd give errors locally

b1mind•2y ago

yea best to do the Vite way it knows best haha They really do a great job of handling stuff for you so

aevitasOP•2y ago

If you still use CRA you gotta look into Vite

b1mind•2y ago

I don't use React so lucky enough to never touch CRA only seen/heard the horrors 🤣

aevitasOP•2y ago

Haha, only used CRA before this and decided to convert this project. Much better so far at least. What are you into?

b1mind•2y ago

Yea its hands down faster and Rollup is better when you do need to get dirty in it than webpack I hear I'm into Svelte(Kit)

aevitasOP•2y ago

Ahh Svelte That's on my "I gotta learn that someday" list

b1mind•2y ago

Warning you might want to forgo React or it will make you not enjoy >.>;; <,<;; anyway glad you got it sorted!

aevitasOP•2y ago

Yeah cheers !

Gaming

Programming

React (Vite) importing your own fonts