Can't use self-hosted fonts

[nosovandrew]

Describe the bug

I'm making website with Svelte (not SvelteKit). Like in vite docs Importing Asset as URL I have .otf files in my /src folder and import them in my global.css file like below:

@font-face {
    font-family: 'GeistMono';
    font-weight: 300;
    src: url('./fonts/GeistMono-Light.otf') format('otf');
}
@font-face {
    font-family: 'GeistMono';
    font-weight: 500;
    src: url('./fonts/GeistMono-Medium.otf') format('otf');
}
@font-face {
    font-family: 'GeistMono';
    font-weight: 700;
    src: url('./fonts/GeistMono-Bold.otf') format('otf');
}
@font-face {
    font-family: 'MV-Skifer';
    font-weight: 500;
    src: url('./fonts/MV-Skifer.otf') format('otf');
}
h1,
h2 {
    font-family: MV-Skifer, Inter, system-ui, Avenir, Helvetica, Arial,
        sans-serif;
    line-height: 1;
    font-weight: 500;
}

Then I'm importing global.css file in main.js like in basic "Vite + Svelte" example:

import 'src/lib/styles/global.css';
import App from './App.svelte';

export default new App({
    target: document.getElementById('app'),
});

When I'm running this project I don't see my custom fonts on the page. There are nothing in console and network tab like as if everything worked out without mistakes.
I tried to build my code and got info that custom font cached in /public folder successfully. But when I start preview mode nothing changed.. Console info after build process has done:

vite v5.1.4 building for production...
✓ 49 modules transformed.
dist/index.html                              0.50 kB │ gzip:   0.33 kB
dist/assets/GeistMono-Light-09AvBhvb.otf    67.58 kB
dist/assets/GeistMono-Medium-DMXWBbP_.otf   68.34 kB
dist/assets/GeistMono-Bold-7Q2BxKL0.otf     70.64 kB
dist/assets/MV-Skifer-BKauBzrQ.otf         147.34 kB
dist/assets/index-Cs1GaSb5.css               1.68 kB │ gzip:   0.68 kB
dist/assets/index-DQs-WKM2.js              634.35 kB │ gzip: 173.96 kB

What I'm doing wrong?

Also I've tried to add font files to <root>/public dir like mentioned in The public Directory and import fonts in global.css via absolute path, but nothing changed.

I think it's a bug.

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-lllpcq?file=src%2Fapp.css

Reproduction

1. npm run dev

Logs

No response

System Info

System:
    OS: macOS 14.3.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 26.46 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
  Browsers:
    Chrome: 121.0.6167.184
    Safari: 17.3.1
  npmPackages:
    @sveltejs/vite-plugin-svelte: ^3.0.1 => 3.0.1 
    svelte: ^4.2.8 => 4.2.9 
    vite: ^5.1.4 => 5.1.4

[nosovandrew]

I've solved this issue by adding format format('opentype') instead of format('otf') in @font-face {} declarations.

It was my mistake, not a bug.