Fonts not working with @font-face in react+vite app

I’m building a React + Vite App with usisng sass right now. For some reason I have trouble with fonts, using @font-face. Here is my _fonts.scss:

@font-face {
      font-display: swap;
      font-family: 'Monoton';
      font-style: normal;
      font-weight: 400;
      src: url('../assets/fonts/monoton-v19-latin-regular.woff2'),
           url('../assets/fonts/monoton-v19-latin-regular.ttf');
    }

My _variables.scss simply looks like this:

    @import 'fonts';

    $font-family-heading: 'Monoton', sans-serif;
    $font-size-heading: 24px;

And my App.module.scss:

    @import '../../sassStyles/variables';

    .heading {
      font-family: $font-family-heading;
      font-size: 120px;
}

The font gets correctly displayed in chrome, but I get the Error Messages:

Failed to decode downloaded font: http://localhost:5173/assets/fonts/monoton-v19-latin-regular.woff2
localhost/:1 OTS parsing error: invalid sfntVersion: 1008821359
localhost/:1 Failed to decode downloaded font: http://localhost:5173/assets/fonts/monoton-v19-latin-regular.ttf
localhost/:1 OTS parsing error: invalid sfntVersion: 1008821359

In firefox the font doesn’t get displayed at all and I get those errors:

downloadable font: rejected by sanitizer (font-family: "Monoton" style:normal weight:400 stretch:100 src index:1) source: http://localhost:5173/assets/fonts/monoton-v19-latin-regular.ttf 

The paths are correct, otherwise it wouldn’t show in Firefox.

I couldn’t find any hint, what might cause this. I found similiar cases, but not quite like mine in the end. Does anyone have an idea?