Allow globalFontFace to accept array of font face rules (#1379)

Co-authored-by: Adam Skoufis <[email protected]>

Author: ronci

.changeset/eighty-shirts-lie.md

@@ -0,0 +1,21 @@
+---
+'@vanilla-extract/css': minor
+---
+
+Add support for passing multiple font face rules to `globalFontFace`
+
+**EXAMPLE USAGE:**
+
+```ts
+const gentium = 'GlobalGentium';
+
+globalFontFace(gentium, [
+  {
+    src: 'local("Gentium")',
+    fontWeight: 'normal'
+  },
+  {
+    src: 'local("Gentium Bold")',
+    fontWeight: 'bold'
+  }
+]);

packages/css/src/style.ts

@@ -121,11 +121,18 @@ export function fontFace(
   return fontFamily;
 }
 
-export function globalFontFace(fontFamily: string, rule: FontFaceRule) {
-  appendCss(
-    { type: 'fontFace', rule: { ...rule, fontFamily } },
-    getFileScope(),
-  );
+export function globalFontFace(
+  fontFamily: string,
+  rule: FontFaceRule | FontFaceRule[],
+) {
+  const rules = Array.isArray(rule) ? rule : [rule];
+
+  for (const singleRule of rules) {
+    appendCss(
+      { type: 'fontFace', rule: { ...singleRule, fontFamily } },
+      getFileScope(),
+    );
+  }
 }
 
 export function keyframes(rule: CSSKeyframes, debugId?: string) {

site/docs/global-api/global-font-face.md

@@ -25,3 +25,33 @@ export const font = style({
   fontFamily: comicSans
 });
 ```
+
+## Multiple Global Fonts with Single Family
+
+The `globalFontFace` function allows you to pass an array of font-face rules that may contain different rules but treat them as if they are from one font family.
+
+```ts compiled
+// text.css.ts
+
+import {
+  globalFontFace,
+  style
+} from '@vanilla-extract/css';
+
+const gentium = 'GlobalGentium';
+
+globalFontFace(gentium, [
+  {
+    src: 'local("Gentium")',
+    fontWeight: 'normal'
+  },
+  {
+    src: 'local("Gentium Bold")',
+    fontWeight: 'bold'
+  }
+]);
+
+export const font = style({
+  fontFamily: gentium
+});
+```