I am using Panda css and ReactJs. I want to add multiple font faces in my project. I have used defineGlobalStyles from panda to add single font face and assigned this object to globalCss in panda config. This is working for single font face but now I want to add multiple font faces and defineGlobalStyles is an object which obviously doesn’t accept duplicate keys.

globalcss.ts

import { defineGlobalStyles } from '@pandacss/dev';

export const globalcss = defineGlobalStyles({
  '@font-face': {
    'font-family': 'roboto',
    'font-style': 'bold',
    'font-weight': '700',
    src: "local('Roboto'), url('../fonts/Roboto-Bold.woff') format('woff'), url('/fonts/Roboto-Bold.woff') format('woff')",
  },
});

panda.config.ts

import type { GlobalStyleObject } from '@pandacss/dev';
import { defineConfig } from '@pandacss/dev';

export const createConfig = (
  globalcss?: GlobalStyleObject | undefined,
) =>
  defineConfig({
   globalCss: globalcss
})

The panda css documentation says that we can use globalCss to add font faces globally.
https://panda-css.com/docs/concepts/writing-styles#global-styles

I tried adding multiple font faces in the object, it won’t work.