sveltesveltekit

Svelte not importing fonts


I store fonts in static/fonts

Here is index.css

@font-face {
  font-family: 'SpaceMono Regular';
  src: url('fonts/SpaceMono-Regular.tts');
}

@font-face {
  font-family: 'SpaceMono Bold';
  src: url('fonts/SpaceMono-Bold.tts');
}

Result:

SvelteKitError: Not found: /fonts/SpaceMono-Regular.tts
    at resolve (/home/qwerty/prjcts/test/node_modules/@sveltejs/kit/src/runtime/server/respond.js:530:13)
    at resolve (/home/qwerty/prjcts/test/node_modules/@sveltejs/kit/src/runtime/server/respond.js:330:5)
    at #options.hooks.handle (/home/qwerty/prjcts/test/node_modules/@sveltejs/kit/src/runtime/server/index.js:71:56)
    at Module.respond (/home/qwerty/prjcts/test/node_modules/@sveltejs/kit/src/runtime/server/respond.js:327:40)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  status: 404,
  text: 'Not Found'
}
SvelteKitError: Not found: /fonts/SpaceMono-Bold.tts
    at resolve (/home/qwerty/prjcts/test/node_modules/@sveltejs/kit/src/runtime/server/respond.js:530:13)
    at resolve (/home/qwerty/prjcts/test/node_modules/@sveltejs/kit/src/runtime/server/respond.js:330:5)
    at #options.hooks.handle (/home/qwerty/prjcts/test/node_modules/@sveltejs/kit/src/runtime/server/index.js:71:56)
    at Module.respond (/home/qwerty/prjcts/test/node_modules/@sveltejs/kit/src/runtime/server/respond.js:327:40)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  status: 404,
  text: 'Not Found'
}

I've tried to move fonts into src, into src/lib, add them via <style> in +layout.svelte, change url from fonts/SpaceMono-Regular.tts to static/fonts/SpaceMono-Regular.tts, but i still getting same error


Solution

  • Vite probably cannot handle the URL like this.
    Use a relative path (./ and ../) or use the $lib alias (which points to the src/lib directory).

    E.g.

    @font-face {
      /* ... */
      src: url('../../fonts/SpaceMono-Regular.tts');
    }
    
    @font-face {
      /* ... */
      src: url('$lib/fonts/SpaceMono-Regular.tts');
    }