@webstudio-is/fonts 0.280.1 → 0.282.0

package/lib/index.js

@@ -246,6 +246,11 @@ var FONT_STYLES = ["normal", "italic", "oblique"];
 
 // src/get-font-faces.ts
 var sanitizeCssUrl = (str) => JSON.stringify(str);
+var fontFormatOrder = Array.from(FONT_FORMATS.values());
+var getFontFormat = (asset) => {
+  const extension = asset.name.slice(asset.name.lastIndexOf(".") + 1);
+  return FONT_FORMATS.has(extension) ? FONT_FORMATS.get(extension) ?? asset.format : FONT_FORMATS.get(asset.format) ?? asset.format;
+};
 var formatFace = (asset, format, url) => {
   if ("variationAxes" in asset.meta) {
     const { wght, wdth } = asset.meta?.variationAxes ?? {};
@@ -275,22 +280,34 @@ var getKey = (asset) => {
 var getFontFaces = (assets, options) => {
   const { assetBaseUrl } = options;
   const faces = /* @__PURE__ */ new Map();
+  const seenUrls = /* @__PURE__ */ new Set();
   for (const asset of assets) {
     const url = `${assetBaseUrl}${asset.name}`;
     const assetKey = getKey(asset);
-    const face = faces.get(assetKey);
-    const format = FONT_FORMATS.get(asset.format);
-    if (format === void 0) {
+    if (seenUrls.has(url)) {
       continue;
     }
-    if (face === void 0) {
-      const face2 = formatFace(asset, format, url);
-      faces.set(assetKey, face2);
-      continue;
+    seenUrls.add(url);
+    const format = getFontFormat(asset);
+    const sources = faces.get(assetKey) ?? /* @__PURE__ */ new Map();
+    const existing = sources.get(format);
+    if (existing === void 0 || url < existing.url) {
+      sources.set(format, { asset, format, url });
     }
-    face.src += `, url(${sanitizeCssUrl(url)}) format("${format}")`;
+    faces.set(assetKey, sources);
   }
-  return Array.from(faces.values());
+  return Array.from(faces.values(), (sources) => {
+    const [{ asset, format, url }, ...fallbacks] = Array.from(
+      sources.values()
+    ).sort(
+      (left, right) => fontFormatOrder.indexOf(left.format) - fontFormatOrder.indexOf(right.format)
+    );
+    const face = formatFace(asset, format, url);
+    face.src += fallbacks.map(
+      ({ format: fallbackFormat, url: fallbackUrl }) => `, url(${sanitizeCssUrl(fallbackUrl)}) format("${fallbackFormat}")`
+    ).join("");
+    return face;
+  });
 };
 
 // src/schema.ts
@@ -364,7 +381,7 @@ var fontWeights = {
   },
   "700": {
     label: "Bold",
-    names: ["bold", "bold"]
+    names: ["bold"]
   },
   "800": {
     label: "Extra Bold",

package/lib/types/font-weights.d.ts

@@ -25,7 +25,7 @@ export declare const fontWeights: {
     };
     readonly "700": {
         readonly label: "Bold";
-        readonly names: readonly ["bold", "bold"];
+        readonly names: readonly ["bold"];
     };
     readonly "800": {
         readonly label: "Extra Bold";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/fonts",
-  "version": "0.280.1",
+  "version": "0.282.0",
   "description": "Fonts utils",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",