Allow to define @font-face in panda.config.ts

[azu]

Description

I want to define multiple @font-face in panda.config.ts for alias with custom font weight.
Currently, Hiragino Font has a Weight problem in Japanese, so I define the following normalized font with adjusted weight in global.css and use it.

Example my global.css

@layer reset, base, tokens, recipes, utilities;

/*
 * Fix iOS font weight issue
 * It is workaround for apple font weight issue
 * Ref: 
 * https://github.com/flutter/flutter/issues/132475
 * - https://pocket-base.com/blog/2023/09/iphone-ipad-hiragino/
 */
@font-face {
    font-family: "Fixme-Hiragino-Sans";
    src: local("HiraginoSans-W1"), local("HiraginoSans-W3");
    font-weight: 100;
}

@font-face {
    font-family: "Fixme-Hiragino-Sans";
    src: local("HiraginoSans-W2"), local("HiraginoSans-W3");
    font-weight: 200;
}

@font-face {
    font-family: "Fixme-Hiragino-Sans";
    src: local("HiraginoSans-W3");
    font-weight: 300;
}

@font-face {
    font-family: "Fixme-Hiragino-Sans";
    src: local("HiraginoSans-W4"), local("HiraginoSans-W3");
    font-weight: 400;
}

@font-face {
    font-family: "Fixme-Hiragino-Sans";
    src: local("HiraginoSans-W5"), local("HiraginoSans-W6");
    font-weight: 500;
}

@font-face {
    font-family: "Fixme-Hiragino-Sans";
    src: local("HiraginoSans-W6");
    font-weight: 600;
}

@font-face {
    font-family: "Fixme-Hiragino-Sans";
    src: local("HiraginoSans-W6");
    font-weight: 700;
}

@font-face {
    font-family: "Fixme-Hiragino-Sans";
    src: local("HiraginoSans-W8"), local("HiraginoSans-W7");
    font-weight: 800;
}

@font-face {
    font-family: "Fixme-Hiragino-Sans";
    src: local("HiraginoSans-W9"), local("HiraginoSans-W8"),
    local("HiraginoSans-W7");
    font-weight: 900;
}

and refer it from panda.config.ts

import { defineConfig, defineGlobalStyles } from "@pandacss/dev";
const globalCss = defineGlobalStyles({
  // Can not define @font-face in globalCSS. These font-face is defined in global.css...
  "html,body": {
    fontFamily: "base",
  },
})
export default defineConfig({
  globalCss,
  presets: ['@pandacss/preset-base'],
  preflight: true,
  include: ["./src/components/**/*.{ts,tsx,js,jsx}", "./src/app/**/*.{ts,tsx,js,jsx}"],
  exclude: [],
  shorthands: false,
  strictTokens: true,
  strictPropertyValues: true,
  polyfill: true,
  // Useful for theme customization
  theme: {
    tokens: {
      // TODO: It depended on global.css. It is not sharable.
      // Want to define Fixme-Hiragino-Sans into panda.config.ts
      fonts: {
        "base": {
          value: "Fixme-Hiragino-Sans, Meiryo, sans-serif",
        },
      },
      // variaous tokens…
  },
  outdir: "styled-system"
});

However, defining @font-face in global.css is not ideal.
Because I would like to share this fonts token setting among multiple web applications in monorepo, but I feel that global.css is difficult to share.

If possible, I would like to define @font-face in panda.config.ts.

Problem Statement/Justification

I want to share my design token between applications.
I would like to share everything including font-face with panda preset etc.

• Presets - Panda CSS
  • presets does not includes global.css

However, global.css requires copy and paste…

Proposed Solution or API

I would like to have an API that allows me to define font-face in panda.config.ts like the following

• defineFontFace([/* font-face definitions */])
• defineGlobalCss("/* css string */")

Alternatives

• Sharable global.css

Additional Information

• Example repository: azu/pandacss-font-face-global-css: panda css disallow to define @font-face on globalCss
  • This repo use global.css for workaround
  • Config: https://github.com/azu/pandacss-font-face-global-css/blob/main/panda.config.ts
• Similar Question on Stackoverflow: roboto - How to write the multiple font faces inside defineGlobalStyles in Panda css - Stack Overflow

[segunadebayo]

I've got a PR for this feature: #2738.

Should land pretty soon

[anubra266]

@azu This is now released. https://panda-css.com/docs/guides/fonts#global-font-face

[azu]

Thanks! I'll try it!