@webstudio-is/fonts 0.26.0 → 0.28.0

package/lib/cjs/font-data.cjs

@@ -60,11 +60,18 @@ const getFontData = (data) => {
   const format = font.type.toLowerCase();
   const originalFamily = font.getName("fontFamily");
   const subfamily = font.getName("preferredSubfamily") ?? font.getName("fontSubfamily");
-  const parsedSubfamily = parseSubfamily(subfamily);
   const family = normalizeFamily(originalFamily, subfamily);
+  const isVariable = Object.keys(font.variationAxes).length !== 0;
+  if (isVariable) {
+    return {
+      format,
+      family,
+      variationAxes: font.variationAxes
+    };
+  }
   return {
     format,
     family,
-    ...parsedSubfamily
+    ...parseSubfamily(subfamily)
   };
 };

package/lib/cjs/get-font-faces.cjs

@@ -23,6 +23,17 @@ __export(get_font_faces_exports, {
 module.exports = __toCommonJS(get_font_faces_exports);
 var import_constants = require("./constants");
 const formatFace = (asset, format) => {
+  if ("variationAxes" in asset.meta) {
+    const { wght, wdth } = asset.meta?.variationAxes ?? {};
+    return {
+      fontFamily: asset.meta.family,
+      fontStyle: "normal",
+      fontDisplay: "swap",
+      src: `url('${asset.path}') format('${format}')`,
+      fontStretch: wdth ? `${wdth.min}% ${wdth.max}%` : void 0,
+      fontWeight: wght ? `${wght.min} ${wght.max}` : void 0
+    };
+  }
   return {
     fontFamily: asset.meta.family,
     fontStyle: asset.meta.style,
@@ -31,18 +42,24 @@ const formatFace = (asset, format) => {
     src: `url('${asset.path}') format('${format}')`
   };
 };
-const getKey = (asset) => asset.meta.family + asset.meta.style + asset.meta.weight;
+const getKey = (asset) => {
+  if ("variationAxes" in asset.meta) {
+    return asset.meta.family + Object.values(asset.meta.variationAxes).join("");
+  }
+  return asset.meta.family + asset.meta.style + asset.meta.weight;
+};
 const getFontFaces = (assets) => {
   const faces = /* @__PURE__ */ new Map();
   for (const asset of assets) {
-    const face = faces.get(getKey(asset));
+    const assetKey = getKey(asset);
+    const face = faces.get(assetKey);
     const format = import_constants.FONT_FORMATS.get(asset.format);
     if (format === void 0) {
       continue;
     }
     if (face === void 0) {
       const face2 = formatFace(asset, format);
-      faces.set(getKey(asset), face2);
+      faces.set(assetKey, face2);
       continue;
     }
     face.src += `, url('${asset.path}') format('${format}')`;

package/lib/cjs/schema.cjs

@@ -19,7 +19,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var schema_exports = {};
 __export(schema_exports, {
   FontFormat: () => FontFormat,
-  FontMeta: () => FontMeta
+  FontMeta: () => FontMeta,
+  FontMetaStatic: () => FontMetaStatic
 });
 module.exports = __toCommonJS(schema_exports);
 var import_zod = require("zod");
@@ -30,8 +31,38 @@ const FontFormat = import_zod.z.union([
   import_zod.z.literal("woff2"),
   import_zod.z.literal("otf")
 ]);
-const FontMeta = import_zod.z.object({
+const AxisName = import_zod.z.enum([
+  "wght",
+  "wdth",
+  "slnt",
+  "opsz",
+  "ital",
+  "GRAD",
+  "XTRA",
+  "XOPQ",
+  "YOPQ",
+  "YTLC",
+  "YTUC",
+  "YTAS",
+  "YTDE",
+  "YTFI"
+]);
+const VariationAxes = import_zod.z.record(
+  AxisName,
+  import_zod.z.object({
+    name: import_zod.z.string(),
+    min: import_zod.z.number(),
+    default: import_zod.z.number(),
+    max: import_zod.z.number()
+  })
+);
+const FontMetaStatic = import_zod.z.object({
   family: import_zod.z.string(),
   style: import_zod.z.enum(import_font_data.styles),
   weight: import_zod.z.number()
 });
+const FontMetaVariable = import_zod.z.object({
+  family: import_zod.z.string(),
+  variationAxes: VariationAxes
+});
+const FontMeta = import_zod.z.union([FontMetaStatic, FontMetaVariable]);

package/lib/font-data.js

@@ -34,12 +34,19 @@ const getFontData = (data) => {
   const format = font.type.toLowerCase();
   const originalFamily = font.getName("fontFamily");
   const subfamily = font.getName("preferredSubfamily") ?? font.getName("fontSubfamily");
-  const parsedSubfamily = parseSubfamily(subfamily);
   const family = normalizeFamily(originalFamily, subfamily);
+  const isVariable = Object.keys(font.variationAxes).length !== 0;
+  if (isVariable) {
+    return {
+      format,
+      family,
+      variationAxes: font.variationAxes
+    };
+  }
   return {
     format,
     family,
-    ...parsedSubfamily
+    ...parseSubfamily(subfamily)
   };
 };
 export {

package/lib/get-font-faces.js

@@ -1,5 +1,16 @@
 import { FONT_FORMATS } from "./constants";
 const formatFace = (asset, format) => {
+  if ("variationAxes" in asset.meta) {
+    const { wght, wdth } = asset.meta?.variationAxes ?? {};
+    return {
+      fontFamily: asset.meta.family,
+      fontStyle: "normal",
+      fontDisplay: "swap",
+      src: `url('${asset.path}') format('${format}')`,
+      fontStretch: wdth ? `${wdth.min}% ${wdth.max}%` : void 0,
+      fontWeight: wght ? `${wght.min} ${wght.max}` : void 0
+    };
+  }
   return {
     fontFamily: asset.meta.family,
     fontStyle: asset.meta.style,
@@ -8,18 +19,24 @@ const formatFace = (asset, format) => {
     src: `url('${asset.path}') format('${format}')`
   };
 };
-const getKey = (asset) => asset.meta.family + asset.meta.style + asset.meta.weight;
+const getKey = (asset) => {
+  if ("variationAxes" in asset.meta) {
+    return asset.meta.family + Object.values(asset.meta.variationAxes).join("");
+  }
+  return asset.meta.family + asset.meta.style + asset.meta.weight;
+};
 const getFontFaces = (assets) => {
   const faces = /* @__PURE__ */ new Map();
   for (const asset of assets) {
-    const face = faces.get(getKey(asset));
+    const assetKey = getKey(asset);
+    const face = faces.get(assetKey);
     const format = FONT_FORMATS.get(asset.format);
     if (format === void 0) {
       continue;
     }
     if (face === void 0) {
       const face2 = formatFace(asset, format);
-      faces.set(getKey(asset), face2);
+      faces.set(assetKey, face2);
       continue;
     }
     face.src += `, url('${asset.path}') format('${format}')`;

package/lib/schema.js

@@ -6,12 +6,43 @@ const FontFormat = z.union([
   z.literal("woff2"),
   z.literal("otf")
 ]);
-const FontMeta = z.object({
+const AxisName = z.enum([
+  "wght",
+  "wdth",
+  "slnt",
+  "opsz",
+  "ital",
+  "GRAD",
+  "XTRA",
+  "XOPQ",
+  "YOPQ",
+  "YTLC",
+  "YTUC",
+  "YTAS",
+  "YTDE",
+  "YTFI"
+]);
+const VariationAxes = z.record(
+  AxisName,
+  z.object({
+    name: z.string(),
+    min: z.number(),
+    default: z.number(),
+    max: z.number()
+  })
+);
+const FontMetaStatic = z.object({
   family: z.string(),
   style: z.enum(styles),
   weight: z.number()
 });
+const FontMetaVariable = z.object({
+  family: z.string(),
+  variationAxes: VariationAxes
+});
+const FontMeta = z.union([FontMetaStatic, FontMetaVariable]);
 export {
   FontFormat,
-  FontMeta
+  FontMeta,
+  FontMetaStatic
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/fonts",
-  "version": "0.26.0",
+  "version": "0.28.0",
   "description": "Fonts utils",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -10,11 +10,11 @@
   },
   "devDependencies": {
     "@jest/globals": "^29.3.1",
-    "@types/fontkit": "^2.0.0",
+    "@types/fontkit": "^2.0.1",
     "jest": "^29.3.1",
     "typescript": "4.7.4",
     "zod": "^3.19.1",
-    "@webstudio-is/design-system": "^0.26.0",
+    "@webstudio-is/design-system": "^0.28.0",
     "@webstudio-is/jest-config": "^1.0.2",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/tsconfig": "^1.0.1"

package/src/__snapshots__/get-font-faces.test.ts.snap

@@ -49,3 +49,16 @@ exports[`getFontFaces() different weight 1`] = `
   },
 ]
 `;
+
+exports[`getFontFaces() variable font 1`] = `
+[
+  {
+    "fontDisplay": "swap",
+    "fontFamily": "Inter",
+    "fontStretch": "25% 151%",
+    "fontStyle": "normal",
+    "fontWeight": "100 1000",
+    "src": "url('/fonts/inter.ttf') format('truetype')",
+  },
+]
+`;

package/src/font-data.ts

@@ -1,4 +1,4 @@
-import type { FontFormat } from "./schema";
+import type { FontFormat, VariationAxes } from "./schema";
 import { create as createFontKit } from "fontkit";
 import { FontWeight, fontWeights } from "./font-weights";
 
@@ -7,6 +7,7 @@ declare module "fontkit" {
   export interface Font {
     type: string;
     getName: (name: string) => string;
+    variationAxes: VariationAxes;
   }
 }
 
@@ -22,7 +23,6 @@ export const parseSubfamily = (subfamily: string) => {
       break;
     }
   }
-
   let weight: FontWeight = "400";
   for (weight in fontWeights) {
     const { name } = fontWeights[weight];
@@ -51,12 +51,18 @@ export const normalizeFamily = (family: string, subfamily: string) => {
   return familyPartsNormalized.join(" ");
 };
 
-type FontData = {
+type FontDataStatic = {
   format: FontFormat;
   family: string;
   style: Style;
   weight: number;
 };
+type FontDataVariable = {
+  format: FontFormat;
+  family: string;
+  variationAxes: VariationAxes;
+};
+type FontData = FontDataStatic | FontDataVariable;
 
 export const getFontData = (data: Uint8Array): FontData => {
   const font = createFontKit(data as Buffer);
@@ -64,11 +70,20 @@ export const getFontData = (data: Uint8Array): FontData => {
   const originalFamily = font.getName("fontFamily");
   const subfamily =
     font.getName("preferredSubfamily") ?? font.getName("fontSubfamily");
-  const parsedSubfamily = parseSubfamily(subfamily);
   const family = normalizeFamily(originalFamily, subfamily);
+  const isVariable = Object.keys(font.variationAxes).length !== 0;
+
+  if (isVariable) {
+    return {
+      format,
+      family,
+      variationAxes: font.variationAxes,
+    };
+  }
+
   return {
     format,
     family,
-    ...parsedSubfamily,
+    ...parseSubfamily(subfamily),
   };
 };

package/src/get-font-faces.test.ts

@@ -73,4 +73,32 @@ describe("getFontFaces()", () => {
     ];
     expect(getFontFaces(assets)).toMatchSnapshot();
   });
+
+  test("variable font", () => {
+    const assets: Array<PartialFontAsset> = [
+      {
+        format: "ttf",
+        meta: {
+          family: "Inter",
+          variationAxes: {
+            wght: { name: "wght", min: 100, default: 400, max: 1000 },
+            wdth: { name: "wdth", min: 25, default: 100, max: 151 },
+            opsz: { name: "opsz", min: 8, default: 14, max: 144 },
+            GRAD: { name: "GRAD", min: -200, default: 0, max: 150 },
+            slnt: { name: "slnt", min: -10, default: 0, max: 0 },
+            XTRA: { name: "XTRA", min: 323, default: 468, max: 603 },
+            XOPQ: { name: "XOPQ", min: 27, default: 96, max: 175 },
+            YOPQ: { name: "YOPQ", min: 25, default: 79, max: 135 },
+            YTLC: { name: "YTLC", min: 416, default: 514, max: 570 },
+            YTUC: { name: "YTUC", min: 528, default: 712, max: 760 },
+            YTAS: { name: "YTAS", min: 649, default: 750, max: 854 },
+            YTDE: { name: "YTDE", min: -305, default: -203, max: -98 },
+            YTFI: { name: "YTFI", min: 560, default: 738, max: 788 },
+          },
+        },
+        path: "/fonts/inter.ttf",
+      },
+    ];
+    expect(getFontFaces(assets)).toMatchSnapshot();
+  });
 });

package/src/get-font-faces.ts

@@ -1,5 +1,5 @@
 import { FONT_FORMATS } from "./constants";
-import type { FontMeta, FontFormat } from "./schema";
+import type { FontMeta, FontFormat, FontMetaStatic } from "./schema";
 
 export type PartialFontAsset = {
   format: FontFormat;
@@ -9,13 +9,25 @@ export type PartialFontAsset = {
 
 export type FontFace = {
   fontFamily: string;
-  fontStyle: FontMeta["style"];
-  fontWeight: number;
   fontDisplay: "swap" | "auto" | "block" | "fallback" | "optional";
   src: string;
+  fontStyle?: FontMetaStatic["style"];
+  fontWeight?: number | string;
+  fontStretch?: string;
 };
 
-const formatFace = (asset: PartialFontAsset, format: string) => {
+const formatFace = (asset: PartialFontAsset, format: string): FontFace => {
+  if ("variationAxes" in asset.meta) {
+    const { wght, wdth } = asset.meta?.variationAxes ?? {};
+    return {
+      fontFamily: asset.meta.family,
+      fontStyle: "normal",
+      fontDisplay: "swap",
+      src: `url('${asset.path}') format('${format}')`,
+      fontStretch: wdth ? `${wdth.min}% ${wdth.max}%` : undefined,
+      fontWeight: wght ? `${wght.min} ${wght.max}` : undefined,
+    };
+  }
   return {
     fontFamily: asset.meta.family,
     fontStyle: asset.meta.style,
@@ -25,15 +37,20 @@ const formatFace = (asset: PartialFontAsset, format: string) => {
   };
 };
 
-const getKey = (asset: PartialFontAsset) =>
-  asset.meta.family + asset.meta.style + asset.meta.weight;
+const getKey = (asset: PartialFontAsset) => {
+  if ("variationAxes" in asset.meta) {
+    return asset.meta.family + Object.values(asset.meta.variationAxes).join("");
+  }
+  return asset.meta.family + asset.meta.style + asset.meta.weight;
+};
 
 export const getFontFaces = (
   assets: Array<PartialFontAsset>
 ): Array<FontFace> => {
   const faces = new Map();
   for (const asset of assets) {
-    const face = faces.get(getKey(asset));
+    const assetKey = getKey(asset);
+    const face = faces.get(assetKey);
     const format = FONT_FORMATS.get(asset.format);
     if (format === undefined) {
       // Should never happen since we allow only uploading formats we support
@@ -42,7 +59,7 @@ export const getFontFaces = (
 
     if (face === undefined) {
       const face = formatFace(asset, format);
-      faces.set(getKey(asset), face);
+      faces.set(assetKey, face);
       continue;
     }
 

package/src/schema.ts

@@ -9,9 +9,48 @@ export const FontFormat = z.union([
 ]);
 export type FontFormat = z.infer<typeof FontFormat>;
 
-export const FontMeta = z.object({
+const AxisName = z.enum([
+  "wght",
+  "wdth",
+  "slnt",
+  "opsz",
+  "ital",
+  "GRAD",
+  "XTRA",
+  "XOPQ",
+  "YOPQ",
+  "YTLC",
+  "YTUC",
+  "YTAS",
+  "YTDE",
+  "YTFI",
+]);
+
+const VariationAxes = z.record(
+  AxisName,
+  z.object({
+    name: z.string(),
+    min: z.number(),
+    default: z.number(),
+    max: z.number(),
+  })
+);
+
+export type VariationAxes = z.infer<typeof VariationAxes>;
+
+export const FontMetaStatic = z.object({
   family: z.string(),
   style: z.enum(styles),
   weight: z.number(),
 });
+
+export type FontMetaStatic = z.infer<typeof FontMetaStatic>;
+
+const FontMetaVariable = z.object({
+  family: z.string(),
+  variationAxes: VariationAxes,
+});
+
+export const FontMeta = z.union([FontMetaStatic, FontMetaVariable]);
+
 export type FontMeta = z.infer<typeof FontMeta>;