cant apply font from google font url

[GCoboFacePhi]

Description

I am creating an internal component library, I am including the font globally using the google fonts url, in the network tab the font loads without problem, in the generated css the font-face is applied well, but when applying the font it is not done correctly.

//panda.config.ts
globalFontface: {
    Poppins: [
      {
        src: 'url(https://fonts.googleapis.com/css2?family=Poppins&display=swap)',
        fontWeight: '400',
        fontStyle: 'normal',
        fontDisplay: 'swap',
      },
      {
        src: 'url(https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap)',
        fontWeight: '600',
        fontStyle: 'normal',
        fontDisplay: 'swap',
      },
    ],
  },
  

///css generated output
  @font-face {
  font-family: Poppins;
  src: url(https://fonts.googleapis.com/css2?family=Poppins&display=swap);
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Poppins;
  src: url(https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap);
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

Link to Reproduction

https://play.panda-css.com/kPWg1JltxP

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

JS Framework

React

Panda CSS Version

0.48.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[anubra266]

@GCoboFacePhi, globalFontFace is for generating @font-face which is not the way to use google fonts. The way ti use google fonts is to @import that url:
Like:

https://play.panda-css.com/kPWg1JltxP/CoyWzYzm6A?tab=css

For easier ways to manage your fonts, you can check out the font docs