I have my desired self hosted WebFont in the public folder of my project:

And using them directly in the css:

@font-face {
  font-family: OpenSans;
  src: url("fonts/OpenSans-Regular.woff2") format("woff2"), url("fonts/OpenSans-Regular.woff") format("woff");
}

I use the default Vite config, with no extra plugins, etc.

export default defineConfig({
  plugins: []
  server: {
    port: 3000,
  },
});

Just using npm start gives me the following result.

In Chrome everything works as expected, and the Font is loaded:

In Firefox it loads the fonts, but the content-type header seems wrong and it shows an error in the console, leading to the font not being used:

How can i fix this issue for Firefox?