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
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
aevitas
aevitas•2y ago
Hmm that might be, these font errors are new to me. Well screw me sideways, I think that worked
b1mind
b1mind•2y ago
I mean it wont be *hashed so I'd say /public/fonts/ is a safe bet oh nice!
aevitas
aevitas•2y ago
Man this took me way too long and I just didn't try this - thank you
b1mind
b1mind•2y ago
np! glad it was simple as that 😄
aevitas
aevitas•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
b1mind•2y ago
import it in the index.html entry point then?
aevitas
aevitas•2y ago
Finally got it
b1mind
b1mind•2y ago
hah what worked?
aevitas
aevitas•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
b1mind•2y ago
ooo yea right
aevitas
aevitas•2y ago
In main.tsx
b1mind
b1mind•2y ago
all /public/ assets import at root so /
aevitas
aevitas•2y ago
Yeah I somehow thought this would be fine while developing and convert when building - but guess not 😄
b1mind
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
aevitas
aevitas•2y ago
Fair enough - I googled it but should have started there..
b1mind
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 😄
aevitas
aevitas•2y ago
I think that wouldn't work as index.html is not inside public - not sure though
b1mind
b1mind•2y ago
yea
aevitas
aevitas•2y ago
I kind of figured that'd give errors locally
b1mind
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
aevitas
aevitas•2y ago
If you still use CRA you gotta look into Vite
b1mind
b1mind•2y ago
I don't use React so lucky enough to never touch CRA only seen/heard the horrors 🤣
aevitas
aevitas•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
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)
aevitas
aevitas•2y ago
Ahh Svelte That's on my "I gotta learn that someday" list
b1mind
b1mind•2y ago
Warning you might want to forgo React or it will make you not enjoy >.>;; <,<;; anyway glad you got it sorted!
aevitas
aevitas•2y ago
Yeah cheers !
Want results from more Discord servers?
Add your server