I have a react proyect that is using sass and have the following structure:

src
-assets
--fonts
---GidolinyaRegular.otf
---Fonts.scss
---Gidolinya-Regular.ttf
---Gidolinya-Regular.woff
---Gidolinya-Regular.woff2
---Gidolinya-Regular.svg
-components
--Navbar.scss

Code in Fonts.scss is:

  @font-face {
    font-family: 'Gidolinya';
    src: url('Gidolinya-Regular.woff2') format('woff2'),
        url('Gidolinya-Regular.woff') format('woff'),
        url('Gidolinya-Regular.ttf') format('truetype'),
        url('Gidolinya-Regular.svg#Gidolinya-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

And in Navbar.scss is:

@import '../assets/fonts/Fonts';

.navbar{
    font-family: 'Gidolinya', sans-serif;
}

I'm having the trouble that always browser is using, in this case, sans serif and showing the following error: Failed to decode downloaded font on Edge or downloadable font: rejected by sanitizer on Firefox for Gidole, that font is available on (https://github.com/larsenwork/Gidole)

I tried other solutions that people bring here to similar problems, Like rename the way the font is imported (adding "-webfont"), change the path in url to an absolute path, change .otf to .ttf or .woff but none of them worked and I'm still having the trouble. Changing the way it is imported makes the error message disapear but still didn't use the font