I am trying to dynamically load fonts from the assets directory in Vue 3 (Typescript) using Vite. But the whole thing results in a 404 error.

const fonts = import.meta.glob('@/assets/fonts/*.otf')

console.log(fonts)

async function loadFonts() {
  for (const path in fonts) {
    const fontName = path.split('/')[3].split('-')[0]

    console.log(fontName)

    const myFont = new FontFace(fontName, `url('${path}')`)
    await myFont.load()
    document.fonts.add(myFont)

    console.log(myFont)
  }
}

loadFonts()