@pandacss/config - npm Package Versions

[0.44.0] - 2024-07-22

Fixed

• Ensure globalFontface definitions are merged correctly

Added

• Add a name mandatory key in Preset to make it easy to target one specifically

Changed

• Replace JSX with React.JSX for better React 19 support

[0.43.0] - 2024-07-19

Added

Add support for defining global font face in config and preset

// pandacss.config.js
export default defineConfig({
  globalFontface: {
    Roboto: {
      src: 'url(/fonts/roboto.woff2) format("woff2")',
      fontWeight: '400',
      fontStyle: 'normal',
    },
  },
})

You can also add multiple font src for the same weight

// pandacss.config.js

export default defineConfig({
  globalFontface: {
    Roboto: {
      // multiple src
      src: ['url(/fonts/roboto.woff2) format("woff2")', 'url(/fonts/roboto.woff) format("woff")'],
      fontWeight: '400',
      fontStyle: 'normal',
    },
  },
})

You can also define multiple font weights

// pandacss.config.js

export default defineConfig({
  globalFontface: {
    // multiple font weights
    Roboto: [
      {
        src: 'url(/fonts/roboto.woff2) format("woff2")',
        fontWeight: '400',
        fontStyle: 'normal',
      },
      {
        src: 'url(/fonts/roboto-bold.woff2) format("woff2")',
        fontWeight: '700',
        fontStyle: 'normal',
      },
    ],
  },
})