Fix/webkit fr custom font (#396)

* fix(desktop): allow data: fonts in the CSP

WKWebView enforces font-src on FontFace loads that Chromium exempts, so custom-font uploads failed on macOS with 'font file could not be loaded'.

* fix(canvas): render custom TTFs at their real weight

Forcing bold on an uploaded face without one triggers synthetic bold, which WebKit multi-passes; under the reverse path's 'difference' composite that self-cancels into hollow glyphs (discussion #356). The style now derives from the font source in TextRenderMetrics, shared by render and measure.

Author: u8array

packages/core/src/lib/fontCache.ts

@@ -65,8 +65,9 @@ function dataUrlBytes(dataUrl: string): Uint8Array | undefined {
 /** Resolves true when the face registered, false when the bytes were rejected
  *  (invalid font, unsupported outlines) or the API is unavailable. Callers on
  *  the interactive upload path surface the failure; background paths ignore it.
- *  Binary source, NOT `url(data:...)`: the url form is a font-src fetch, which
- *  the desktop CSP blocks (no `data:` there, deliberately). */
+ *  Binary source, NOT `url(data:...)`: WKWebView enforces font-src even on
+ *  FontFace loads, and byte registration plus `font-src data:` is the combo
+ *  that works across engines (#356). */
 async function registerFontFace(entry: CachedFont): Promise<boolean> {
   try {
     const bytes = dataUrlBytes(entry.dataUrl);

packages/core/src/lib/labelGeometry/textRenderMetrics.ts

@@ -24,6 +24,11 @@ export interface TextRenderMetrics {
   /** Canvas-only resolved bitmap device font (A-H); single source for
    *  consumers that need the id beside the metrics (line pitch, bounds). */
   deviceFontId?: string;
+  /** Style the render and the measure share. Bold only for the PrintLab
+   *  Font-0 substitute (real bold face, calibrated so); device substitutes
+   *  and custom TTFs render at their real weight like the printer, and
+   *  synthetic bold hollows out under WebKit's 'difference' (#356). */
+  fontStyle: "normal" | "bold";
 }
 
 /** Parser feeds these (no obj at parse time). */
@@ -40,9 +45,6 @@ export interface TextMetricsInput {
   /** Canvas-only bitmap device-font size/scale (A-H snap to magnifications). */
   fontSizeDots?: number;
   scaleXOverride?: number;
-  /** Canvas-only: device fonts paint at this weight, so inkWidth must measure
-   *  it too (emit/parse omit it and keep the default bold). */
-  measureFontStyle?: string;
   /** Canvas-only device-font inter-char spacing folded into inkWidth so the
    *  reverse-box / ^FPR width matches the letter-spaced render. */
   letterSpacingDots?: number;
@@ -62,16 +64,27 @@ export function computeTextRenderMetrics(input: TextMetricsInput): TextRenderMet
     input.scaleXOverride ?? (fontWidth > 0 ? fontWidth / fontHeight : 1);
   const measureSizeDots =
     input.fontSizeDots ?? fontHeight / ZPL_FONT_HEIGHT_TO_CSS_RATIO;
+  // Style follows the RESOLVED face, so a referenced-but-unloaded TTF that
+  // falls back to the substitute keeps its calibrated bold (metrics feed the
+  // anchor math); a real face renders and measures at its own weight.
+  const fontStyle: "normal" | "bold" = fontFamily === DEFAULT_FONT_FAMILY ? "bold" : "normal";
   const glyphWidthDots = measureInkWidthPx(
     content,
     measureSizeDots,
     fontFamily,
-    input.measureFontStyle,
+    fontStyle,
   );
   const spacingDots =
     (input.letterSpacingDots ?? 0) * Math.max(0, content.length - 1);
   const inkWidthDots = (glyphWidthDots + spacingDots) * fontScaleX;
-  return { content, fontFamily, fontScaleX, inkWidthDots, fontSizeDots: input.fontSizeDots };
+  return {
+    content,
+    fontFamily,
+    fontScaleX,
+    inkWidthDots,
+    fontSizeDots: input.fontSizeDots,
+    fontStyle,
+  };
 }
 
 /** Ink extent feeding the FO/I and FO/B anchor shift: cell grid for bitmap
@@ -136,7 +149,6 @@ export function getTextRenderMetrics(
       fontFamilyOverride,
       fontSizeDots: device?.fontSizeDots,
       scaleXOverride: device?.scaleX,
-      measureFontStyle: device ? "normal" : undefined,
       letterSpacingDots: device?.letterSpacingDots,
     }),
     yOffsetDots: device?.yOffsetDots,

src-tauri/tauri.conf.json

@@ -22,8 +22,8 @@
       }
     ],
     "security": {
-      "csp": "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self'; connect-src 'self' ipc: http://ipc.localhost http://127.0.0.1:*; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; form-action 'self'",
-      "devCsp": "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self'; connect-src 'self' ipc: http://ipc.localhost http://127.0.0.1:* http://localhost:5173 ws://localhost:5173; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; form-action 'self'"
+      "csp": "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self' ipc: http://ipc.localhost http://127.0.0.1:*; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; form-action 'self'",
+      "devCsp": "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self' ipc: http://ipc.localhost http://127.0.0.1:* http://localhost:5173 ws://localhost:5173; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; form-action 'self'"
     }
   },
   "plugins": {

src/components/Canvas/KonvaObject.tsx

@@ -613,10 +613,7 @@ function KonvaObjectInner({
   if (obj.type === "text" && textMetrics) {
     const p = obj.props;
     const { content, fontFamily, fontScaleX, fontSizePx } = textMetrics;
-    // Bitmap device fonts (A-H) carry their own weight via the substitute
-    // family (Vera Mono / Bold, OCR); forcing bold there faux-bolds them
-    // thicker than Labelary. Font 0 / custom uploads stay bold.
-    const fontStyle = textMetrics.fontSizeDots != null ? "normal" : "bold";
+    const fontStyle = textMetrics.fontStyle;
     // Device-font position trims (cap-top / left-bearing) vs Labelary.
     const deviceXOffPx = dotsToPx(textMetrics.xOffsetDots ?? 0, scale, dpmm);
     const deviceYOffPx = dotsToPx(textMetrics.yOffsetDots ?? 0, scale, dpmm);

src/lib/fontCache.test.ts

@@ -41,8 +41,7 @@ describe('fontCache', () => {
   // ── loadFontFile ─────────────────────────────────────────────────────────────
 
   it('registers the FontFace from bytes, never a url() source', async () => {
-    // Regression (#356 comment): a url(data:...) source is a font-src fetch,
-    // which the desktop CSP blocks; every upload failed there.
+    // Regression #356; the why lives at registerFontFace's doc header.
     const sources: unknown[] = [];
     const Original = globalThis.FontFace;
     class CapturingFontFace {

src/lib/labelGeometry/textRenderMetrics.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { getTextRenderMetrics } from "@zplab/core/lib/labelGeometry/textRenderMetrics";
+import { computeTextRenderMetrics, getTextRenderMetrics } from "@zplab/core/lib/labelGeometry/textRenderMetrics";
 import type { LabelObject } from "@zplab/core/types/Group";
 import type { LabelConfig } from "@zplab/core/types/LabelConfig";
 
@@ -74,3 +74,34 @@ describe("getTextRenderMetrics — device font resolution", () => {
     expect(m!.content).toBe("Abc");
   });
 });
+
+describe("computeTextRenderMetrics fontStyle", () => {
+  it("derives the style from the RESOLVED face", async () => {
+    // Only the PrintLab substitute is bold (calibrated so); see #356.
+    expect(computeTextRenderMetrics({ content: "X", fontHeight: 30, fontWidth: 0 }).fontStyle)
+      .toBe("bold");
+    // Referenced but NOT loaded: falls back to the substitute, which must
+    // keep its calibrated bold or the anchor metrics measure the wrong face.
+    expect(
+      computeTextRenderMetrics({
+        content: "X", fontHeight: 30, fontWidth: 0, printerFontName: "MISSING.TTF",
+      }).fontStyle,
+    ).toBe("bold");
+    const { loadFontBytes, removeFont } = await import("@zplab/core/lib/fontCache");
+    await loadFontBytes(new Uint8Array([1, 2, 3]), "DINALTERNATE.TTF");
+    try {
+      expect(
+        computeTextRenderMetrics({
+          content: "X", fontHeight: 30, fontWidth: 0, printerFontName: "DINALTERNATE.TTF",
+        }).fontStyle,
+      ).toBe("normal");
+    } finally {
+      removeFont("DINALTERNATE.TTF");
+    }
+    expect(
+      computeTextRenderMetrics({
+        content: "X", fontHeight: 30, fontWidth: 0, fontFamilyOverride: "'Vera Mono'",
+      }).fontStyle,
+    ).toBe("normal");
+  });
+});