@font-face doesn't seem to work in globalCss

[Opt-Nash]

Hi !

My issue is pretty straightforward. When using @font-face inside globalCss :

import { globalCss } from '@stitches/react';

const global = {
   'body': {
        'font-family': 'Marhey',
        // ...
   },
}

const globalStyles = globalCss({
    '@font-face': {
        fontFamily: 'Marhey',
        src: 'url("../static/fonts/Marhey-VariableFont_wght.ttf"), format("truetype")',
    },
    ...global,
});

function App() {
  globalStyles();
  return (
       <h1>Hello World !</h1>
  );
}

// ...

The font family simply doesn't show up, despite having downloaded the .ttf file. I tried moving it on the same level as the above file but it doesn't work either. I did what the doc says nevertheless...

Help would be greatly appreciated !