fontdue-js 3.10.0 → 3.10.1

package/CHANGELOG.md

@@ -1,12 +1,16 @@
+## 3.10.1
+
+- Fixed the `TypeTester`, `FeatureTesters`, `CharacterViewer` and `StoreModal` never rendering a font in some Safari versions when its family or style name contains punctuation, such as an apostrophe, or starts with a digit.
+
 ## 3.10.0
 
 - The `StoreModal`’s browse page leaves out an unlisted family, and lists an unlisted superfamily’s families in its place, each opening the superfamily’s page. Unlisted font packs are left out of the browse page too.
 - Checkboxes are 20px by default, down from 40px on the `TestFontsForm`, `NewsletterSignup` and license agreement checkboxes. Set `--checkbox-size: 40px` and `--checkbox-margin: 20px` to keep the larger box.
-- Fixed a type tester with a `truncate` line cap cutting through a line, or showing one line too few, in Safari before 26.1. The checkbox size and this fix ship as stylesheet rules, so take `dist/fontdue.css` from this version alongside the JS.
+- Fixed a type tester with a `truncate` line cap cutting through a line, or showing one line too few, in Safari before 26.1.
 
 ## 3.9.0
 
-- `TestFontsForm` can let the visitor choose which families to download. With *Customer’s choice* set under *Settings → Test fonts* – or `testFonts: { familySelection: "choice" }` in the config, or the `familySelection` prop (`family-selection` on `<fontdue-test-fonts-form>`) – the form lists the families with a checkbox each plus *Select all*, and the download holds only the ticked ones. Ships new stylesheet rules, so take `dist/fontdue.css` from this version alongside the JS.
+- `TestFontsForm` can let the visitor choose which families to download. With *Customer’s choice* set under *Settings → Test fonts* – or `testFonts: { familySelection: "choice" }` in the config, or the `familySelection` prop (`family-selection` on `<fontdue-test-fonts-form>`) – the form lists the families with a checkbox each plus *Select all*, and the download holds only the ticked ones.
 - `TestFontsForm` takes `collectionSlug` or `collectionId` (`collection-slug` / `collection-id`, comma-separated for several) to offer just those families, with no checkboxes – for a form on a family’s own page. When preloading, pass the same value to `loadTestFontsFormQuery({ collectionSlug })`; the old options-only call still works.
 
 ## 3.8.0
@@ -29,7 +33,7 @@
 - A product route takes a collection's slug as well as its ID, so `?store=product/example-sans` works alongside the base64 form. `fontdue-store-route="product/<slug>"` takes a slug now too – previously a slug there either did nothing (if it contained a hyphen) or loaded a broken product page.
 - `TypeTester` and `TypeTesters` take a `truncate` prop, and `<fontdue-type-tester>` and `<fontdue-type-testers>` take a `truncate` attribute, so each tester can cap its paragraph at its own number of lines instead of every tester on a site sharing one value. A per-tester value overrides the `truncate` UI config.
 - Fixed a type tester leaving a blank gap where its variable-axis sliders would go, on a static style or when none of the requested axes are in the font. The toolbar, features panel and dropdown placements were all affected.
-- A numeric `truncate` cap now stays in place while a visitor edits the text, instead of the paragraph jumping to full height on click and back on blur. `truncate: true` is unchanged and still opens to the full paragraph when clicked; pass `{ lines: 20, expandOnFocus: true }` if you want a line count to behave the old way. On the custom elements that object is a second word in the attribute – `truncate="20 expandable"`, or `truncate="20 fixed"` to spell out the default. Ships new stylesheet rules, so take `dist/fontdue.css` from this version alongside the JS.
+- A numeric `truncate` cap now stays in place while a visitor edits the text, instead of the paragraph jumping to full height on click and back on blur. `truncate: true` is unchanged and still opens to the full paragraph when clicked; pass `{ lines: 20, expandOnFocus: true }` if you want a line count to behave the old way. On the custom elements that object is a second word in the attribute – `truncate="20 expandable"`, or `truncate="20 fixed"` to spell out the default.
 - Fixed a type tester opening at a size outside the range its size slider spans. A seeded size below `typeTester.size.min` (or above `max`) rendered at that size with the slider handle drawn off the end of its track; it is clamped into range now.
 - `NewsletterSignup` and `TestFontsForm` now name which form a submission came from, so Fontdue records each as its own event rather than as a checkout contact step.
 - Fixed the Store Modal’s Checkout button doing nothing on a store using Stripe Tax, and the Cart’s Next button on the billing and licensee steps. Stripe.js now throws “Unable to select session” when asked to validate a form that has no payment in it yet; the address fields are validated on their own in that case, with the same inline errors.
@@ -47,7 +51,7 @@
 ## 3.4.1
 
 - Fixed the standalone type tester dropping an axis slider when its `variable-settings` starting value is negative. `variable-settings="slnt -11"` was rejected as unparseable, so no slant slider appeared and nothing in the markup explained why. Any axis with a negative range was affected. Extra spaces between an axis and its value are tolerated now too.
-- Fixed the `FeatureTesters` switch knob rendering stretched in Safari 18 and earlier. The fix is in `dist/fontdue.css`.
+- Fixed the `FeatureTesters` switch knob rendering stretched in Safari 18 and earlier.
 
 ## 3.4.0
 
@@ -74,7 +78,7 @@
 
 ## 3.2.3
 
-- Fixed `TypeTester` text drifting out of alignment. Centred, right-aligned and RTL testers sat off-centre once the font was small enough for the text to flow into columns, and centred testers were slightly off at every size. Ships new stylesheet rules, so take `fontdue-js/dist/fontdue.css` from this version alongside the JS.
+- Fixed `TypeTester` text drifting out of alignment. Centred, right-aligned and RTL testers sat off-centre once the font was small enough for the text to flow into columns, and centred testers were slightly off at every size.
 - The collapsed `FontdueAdminToolbar` pill now carries the Fontdue wordmark — Fontdue, Fontdue · Previewing hidden fonts, Fontdue · Preview expired. If you style the toolbar yourself, `__mark` has left `__button` and the expired suffix is a new `__expired-suffix` span.
 
 ## 3.2.2

package/dist/__tests__/fontLoader.test.js

@@ -1,5 +1,37 @@
 import { describe, it, expect } from 'vitest';
-import { selectFontSource } from "../fontLoader.js";
+import { selectFontSource, fontStyleFamily } from "../fontLoader.js";
+describe('fontStyleFamily', () => {
+  it('joins family and style unchanged when both are plain identifiers', () => {
+    expect(fontStyleFamily('Vain', 'Regular')).toBe('Vain Regular');
+    expect(fontStyleFamily('Sweet Lily', 'Bold Italic')).toBe('Sweet Lily Bold Italic');
+  });
+  it("escapes an apostrophe, which some Safari builds reject in a FontFace family", () => {
+    expect(fontStyleFamily("Hell's Gate", 'fairypools')).toBe('Hell_27s Gate fairypools');
+  });
+  it('escapes other ASCII punctuation instead of dropping it, so names stay distinct', () => {
+    expect(fontStyleFamily('A&B', 'Regular')).toBe('A_26B Regular');
+    expect(fontStyleFamily('A "B"', 'Regular')).toBe('A _22B_22 Regular');
+    expect(fontStyleFamily("Hell's Gate", 'Regular')).not.toBe(fontStyleFamily('Hells Gate', 'Regular'));
+  });
+  it('prefixes words CSS cannot parse unquoted: leading digits and reserved words', () => {
+    expect(fontStyleFamily('0712', 'Regular')).toBe('_0712 Regular');
+    expect(fontStyleFamily('Grotesk', '-5 Light')).toBe('Grotesk _-5 Light');
+    expect(fontStyleFamily('Initial', 'Bold')).toBe('_Initial Bold');
+    expect(fontStyleFamily('Default', 'Regular')).toBe('_Default Regular');
+  });
+  it('keeps non-ASCII letters, hyphens and underscores, and collapses whitespace', () => {
+    expect(fontStyleFamily('Généreuse  Sans', 'Extra-Bold_2')).toBe('Généreuse Sans Extra-Bold_2');
+    expect(fontStyleFamily(' 游明朝 ', ' W3 ')).toBe('游明朝 W3');
+  });
+  it('only yields CSS identifiers', () => {
+    const names = [fontStyleFamily("Hell's Gate", 'fairypools'), fontStyleFamily('0712', '1'), fontStyleFamily('(Test) / 50%', 'Regular!'), fontStyleFamily('--x', 'y')];
+    for (const name of names) {
+      for (const word of name.split(' ')) {
+        expect(word).toMatch(/^(?:[A-Za-z_\u0080-￿]|-[A-Za-z_\u0080-￿])[\w\u0080-￿-]*$/);
+      }
+    }
+  });
+});
 describe('selectFontSource', () => {
   const woff2 = function () {
     let extra = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

package/dist/components/FeatureTester/FeatureTesterCard.js

@@ -7,6 +7,7 @@ import { graphql, useFragment } from 'react-relay';
 import FontStyle from '../FontStyle/index.js';
 import useFeaturesData from '../TypeTester/useFeaturesData.js';
 import useFeatureTesterAutofit from '../../hooks/useFeatureTesterAutofit.js';
+import { fontStyleFamily } from '../../fontLoader.js';
 import { sensitiveStringsForFeature, computeSensitivityFlags, segmentByFlags } from './highlight.js';
 const fragment = (_FeatureTesterCard_fontStyle.hash && _FeatureTesterCard_fontStyle.hash !== "687d8afca93d615ed0794f963702d082" && console.error("The definition of 'FeatureTesterCard_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FeatureTesterCard_fontStyle);
 export default function FeatureTesterCard(_ref) {
@@ -88,7 +89,7 @@ export default function FeatureTesterCard(_ref) {
   } = useFeatureTesterAutofit({
     enabled: autofit,
     text: content,
-    fontFamily: `${data.cssFamily} ${data.name}`,
+    fontFamily: fontStyleFamily(data.cssFamily, data.name),
     feature,
     fontSize: fontSize ?? 72,
     letterSpacing: letterSpacing ?? 0,

package/dist/components/StoreModal/StoreModalContainer.js

@@ -6,6 +6,7 @@ import { useLazyLoadQuery, graphql } from 'react-relay';
 import StoreModalCheckoutContext from './StoreModalCheckoutContext.js';
 import CheckoutSteps from '../Cart/CheckoutSteps.js';
 import useFontStyle from '../useFontStyle.js';
+import { fontStyleFamily } from '../../fontLoader.js';
 import StoreModalLoadingScreen from '../elements/StoreModalLoadingScreen/index.js';
 import ConfigContext from '../ConfigContext.js';
 const getPageTitle = name => {
@@ -89,8 +90,8 @@ const StoreModalContainer = _ref => {
   };
   const [checkoutStep, setCheckoutStep] = useState(CheckoutSteps.Customer);
   const [checkoutError, setCheckoutError] = useState(null);
-  const regularName = uiFontStyle ? `${uiFontStyle.cssFamily} ${uiFontStyle.name}` : null;
-  const boldName = uiFontStyleBold ? `${uiFontStyleBold.cssFamily} ${uiFontStyleBold.name}` : null;
+  const regularName = uiFontStyle ? fontStyleFamily(uiFontStyle.cssFamily, uiFontStyle.name) : null;
+  const boldName = uiFontStyleBold ? fontStyleFamily(uiFontStyleBold.cssFamily, uiFontStyleBold.name) : null;
   return /*#__PURE__*/React.createElement(StoreModalCheckoutContext.Provider, {
     value: {
       checkoutStep,

package/dist/components/useFontStyle.js

@@ -1,7 +1,7 @@
 import _useFontStyle_fontStyle from "../__generated__/useFontStyle_fontStyle.graphql.js";
 import { useState, useRef, useEffect } from 'react';
 import { graphql, useFragment } from 'react-relay';
-import { loadFont, isFontLoaded } from '../fontLoader.js';
+import { loadFont, isFontLoaded, fontStyleFamily } from '../fontLoader.js';
 import { ensureMetricFallback, metricFallbackFamily } from '../metricFallback.js';
 const FALLBACK_FAMILY = 'Fallback';
 const useFontStyle = _ref => {
@@ -9,7 +9,7 @@ const useFontStyle = _ref => {
     fontStyle: fontStyleKey
   } = _ref;
   const fontStyle = useFragment((_useFontStyle_fontStyle.hash && _useFontStyle_fontStyle.hash !== "171c546f40909692656c5e143a98d8a3" && console.error("The definition of 'useFontStyle_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _useFontStyle_fontStyle), fontStyleKey ?? null);
-  const fontFamily = fontStyle ? `${fontStyle.cssFamily} ${fontStyle.name}` : null;
+  const fontFamily = fontStyle ? fontStyleFamily(fontStyle.cssFamily, fontStyle.name) : null;
   const sources = fontStyle === null || fontStyle === void 0 ? void 0 : fontStyle.webfontSources;
   const verticalMetrics = fontStyle === null || fontStyle === void 0 ? void 0 : fontStyle.verticalMetrics;
 

package/dist/fontLoader.d.ts

@@ -9,6 +9,30 @@ interface VerticalMetrics {
     readonly descender: number;
     readonly lineGap: number | null;
 }
+/**
+ * The family name a font style's FontFace is registered under, and the name
+ * CSS must use to render it: `"<cssFamily> <styleName>"`, made safe to parse
+ * as an unquoted CSS font-family.
+ *
+ * Some Safari builds parse the FontFace family argument as CSS, so a name
+ * like "Hell's Gate fairypools" (the apostrophe opens an unterminated string)
+ * or "0712 Regular" (an identifier can't start with a digit) makes `load()`
+ * reject with "SyntaxError: The string did not match the expected pattern."
+ * and the style never renders, while Chrome and other WebKit builds take the
+ * argument literally. A name that is valid either way works everywhere:
+ *
+ * - an ASCII character other than a letter, digit, `-` or `_` is escaped as
+ *   `_<hex code>` (`'` → `_27`), so distinct names stay distinct;
+ * - a word starting with a digit, `-<digit>` or `--`, or matching a reserved
+ *   word, gets a leading `_`.
+ *
+ * Non-ASCII characters are valid identifier characters and are kept.
+ *
+ * @example
+ *   fontStyleFamily("Hell's Gate", 'fairypools') // => 'Hell_27s Gate fairypools'
+ *   fontStyleFamily('0712', 'Regular')           // => '_0712 Regular'
+ */
+export declare function fontStyleFamily(cssFamily: string | null | undefined, styleName: string): string;
 export declare function isFontLoaded(fontFamily: string): boolean;
 export declare function loadFont(fontFamily: string, sources: ReadonlyArray<FontSource | null>, verticalMetrics?: VerticalMetrics | null): Promise<FontFace | null>;
 /**

package/dist/fontLoader.js

@@ -1,3 +1,38 @@
+// Words CSS refuses as an unquoted font-family identifier (the CSS-wide
+// keywords plus `default`), compared case-insensitively.
+const RESERVED_FAMILY_WORDS = new Set(['inherit', 'initial', 'unset', 'revert', 'revert-layer', 'default']);
+
+/**
+ * The family name a font style's FontFace is registered under, and the name
+ * CSS must use to render it: `"<cssFamily> <styleName>"`, made safe to parse
+ * as an unquoted CSS font-family.
+ *
+ * Some Safari builds parse the FontFace family argument as CSS, so a name
+ * like "Hell's Gate fairypools" (the apostrophe opens an unterminated string)
+ * or "0712 Regular" (an identifier can't start with a digit) makes `load()`
+ * reject with "SyntaxError: The string did not match the expected pattern."
+ * and the style never renders, while Chrome and other WebKit builds take the
+ * argument literally. A name that is valid either way works everywhere:
+ *
+ * - an ASCII character other than a letter, digit, `-` or `_` is escaped as
+ *   `_<hex code>` (`'` → `_27`), so distinct names stay distinct;
+ * - a word starting with a digit, `-<digit>` or `--`, or matching a reserved
+ *   word, gets a leading `_`.
+ *
+ * Non-ASCII characters are valid identifier characters and are kept.
+ *
+ * @example
+ *   fontStyleFamily("Hell's Gate", 'fairypools') // => 'Hell_27s Gate fairypools'
+ *   fontStyleFamily('0712', 'Regular')           // => '_0712 Regular'
+ */
+export function fontStyleFamily(cssFamily, styleName) {
+  return `${cssFamily ?? ''} ${styleName}`.split(/\s+/).filter(word => word.length > 0).map(cssIdentifierWord).join(' ');
+}
+function cssIdentifierWord(word) {
+  const escaped = word.replace(/[\x00-\x7f]/g, char => /[A-Za-z0-9_-]/.test(char) ? char : `_${char.charCodeAt(0).toString(16)}`);
+  const unparseable = /^(?:[0-9]|-[0-9]|--|-$)/.test(escaped);
+  return unparseable || RESERVED_FAMILY_WORDS.has(escaped.toLowerCase()) ? `_${escaped}` : escaped;
+}
 const cache = new Map();
 const loaded = new Set();
 export function isFontLoaded(fontFamily) {

package/dist/version.js

@@ -8,4 +8,4 @@
 // (Fontage.ClientVersions) to spot sites that need to upgrade before a
 // feature that depends on a newer client can work for them.
 export const CLIENT_VERSION_HEADER = 'fontdue-client-version';
-export const version = "3.10.0";
+export const version = "3.10.1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "3.10.0",
+  "version": "3.10.1",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",