Load with Vite URL

Questions
1

Hello there,

Ok, first of all, I am newbie with Node/Three/Vite.

Id followed the manual from Installation to Creating Text and I wanna put some text inside my scene.
Them I choose the FontLoader/TextGeometry method cause simply.

Documentation simply tell me to do that :

const loader = new FontLoader();
const font = loader.load(
	// resource URL
	'fonts/helvetiker_bold.typeface.json'
)

This doesn’t work.

Then, I tried some things

  • Put da font in /public folder and use it, put it outside /public in a /font folder and use it, put it in a /font folder in /public folder and use it
  • Perform every kind of import Vite can implement in this page Static Asset Handling | Vite
  • Tap in google “import three js font with vite”
  • Create a new font from Google font, transform it to json and use it

Here is a screenshot from my IDE in that final state, I’m letting down for the moment

vite_issue
vite_issue1034×649 87.9 KB

The vite.config.js is empty.

2

  1. You kinda can skip that part - it makes the font giant and so inflexible it’s rarely a good idea (consider using TTFLoader instead.)

  2. Check the font request in the Network panel in devtools - see if in the response you see the actual font or some random XML (if random XML - it means the path is incorrect.)