@zalify/storefront-kit 0.1.1 → 0.1.2

package/dist/react/engine/fonts.js

@@ -29,5 +29,10 @@ export function parseFontHandle(handle) {
 }
 export function googleFontsHref(family, axes = 'ital,wght@0,400;0,500;0,700;1,400') {
     const param = family.trim().replace(/ /g, '+');
-    return `https://fonts.googleapis.com/css2?family=${param}:${axes}&display=swap`;
+    // display=optional: the font never swaps in after first paint, so a
+    // late-arriving font file can't reflow text (zero font CLS). With the
+    // stylesheet loaded async (CssVariables), swap would otherwise shift
+    // layout on every cold load; optional shows the fallback first visit
+    // and the brand font from the cache on later views.
+    return `https://fonts.googleapis.com/css2?family=${param}:${axes}&display=optional`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zalify/storefront-kit",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "description": "The Zalify storefront SDK: framework-agnostic commerce logic (/commerce), the theme contract types and validators (/schemas), the canvas-editor bridge (/editor), and the React theme engine + shared components (/ui, /react/server). Consumed as TypeScript source inside the zalify-storefronts monorepo; published as compiled ESM + d.ts.",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/react/engine/fonts.ts

@@ -38,5 +38,10 @@ export function googleFontsHref(
   axes = 'ital,wght@0,400;0,500;0,700;1,400',
 ): string {
   const param = family.trim().replace(/ /g, '+');
-  return `https://fonts.googleapis.com/css2?family=${param}:${axes}&display=swap`;
+  // display=optional: the font never swaps in after first paint, so a
+  // late-arriving font file can't reflow text (zero font CLS). With the
+  // stylesheet loaded async (CssVariables), swap would otherwise shift
+  // layout on every cold load; optional shows the fallback first visit
+  // and the brand font from the cache on later views.
+  return `https://fonts.googleapis.com/css2?family=${param}:${axes}&display=optional`;
 }