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
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');
}