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:
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
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 localHmm that might be, these font errors are new to me.
Well screw me sideways, I think that worked
I mean it wont be *hashed so I'd say /public/fonts/ is a safe bet
oh nice!
Man this took me way too long and I just didn't try this - thank you
np! glad it was simple as that 😄
Yeah 😄
Got happy a bit too fast..
VSC screams this:
But what VSC suggests is what I tried earlier
Ok..
import it in the index.html entry point then?
Finally got it
hah what worked?
Stupid brain thought
Would convert to
But just putting it like that works fine
ooo yea right
In main.tsx
all /public/ assets import at root so
/
Yeah I somehow thought this would be fine while developing and convert when building - but guess not 😄
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
Fair enough - I googled it but should have started there..
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 😄
I think that wouldn't work as index.html is not inside public - not sure though
yea
I kind of figured that'd give errors locally
yea best to do the Vite way it knows best haha
They really do a great job of handling stuff for you so
If you still use CRA you gotta look into Vite
I don't use React so lucky enough to never touch CRA only seen/heard the horrors 🤣
Haha, only used CRA before this and decided to convert this project. Much better so far at least. What are you into?
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)
Ahh Svelte
That's on my "I gotta learn that someday" list
Warning you might want to forgo React or it will make you not enjoy >.>;;
<,<;; anyway glad you got it sorted!
Yeah cheers !