fontdue-js 2.25.0 → 2.26.0

package/dist/fontLoader.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isFontLoaded = isFontLoaded;
 exports.loadFont = loadFont;
+exports.selectFontSource = selectFontSource;
 const cache = new Map();
 const loaded = new Set();
 function isFontLoaded(fontFamily) {
@@ -22,9 +23,43 @@ async function loadFont(fontFamily, sources, verticalMetrics) {
   });
   return promise;
 }
+
+/**
+ * Pick the best `FontSource` for the current browser from a list emitted by
+ * the backend's `webfontSources` field.
+ *
+ * The backend already returns sources in CSS `src:` priority order
+ * (dedicated COLRv1 → COLRv0 → SVG → sbix → bundled → outline-fallback,
+ * within format). The job here is to drop entries whose color tech the
+ * browser can't render — without this, fetching e.g. an SVG-in-OpenType
+ * file in Chrome pins a face Chrome can only render as outline.
+ *
+ * Sources with no `tech` tag are kept unconditionally (outline / universal).
+ * If every tech-tagged source is filtered out, falls back to the unfiltered
+ * list — the browser will at least try to render something rather than the
+ * fallback font.
+ *
+ * `techSupportCheck` is injectable for tests; defaults to
+ * `CSS.supports("font-tech(color-<tech>)")`.
+ */
+function selectFontSource(sources) {
+  let techSupportCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultTechSupport;
+  const valid = sources.filter(s => s != null && s.url != null);
+  const supported = valid.filter(s => !s.tech || techSupportCheck(s.tech));
+  const candidates = supported.length > 0 ? supported : valid;
+  return candidates.find(s => s.format === 'woff2') ?? candidates[0] ?? null;
+}
+function defaultTechSupport(tech) {
+  // SSR or very old browsers without CSS.supports: be optimistic, don't drop
+  // tech-tagged sources. Filtering exists to *prevent* loading a file the
+  // browser can't render, not to forbid sources we're unsure about.
+  if (typeof CSS === 'undefined' || typeof CSS.supports !== 'function') {
+    return true;
+  }
+  return CSS.supports(`font-tech(color-${tech})`);
+}
 async function doLoadFont(fontFamily, sources, verticalMetrics) {
-  const validSources = sources.filter(s => s != null && s.url != null);
-  const source = validSources.find(s => s.format === 'woff2') ?? validSources[0];
+  const source = selectFontSource(sources);
   if (!source || !source.url) throw new Error(`No font sources for ${fontFamily}`);
   const response = await fetch(source.url);
   if (!response.ok) throw new Error(`Failed to fetch font: ${response.status}`);

package/dist/fontdue.css

@@ -2547,27 +2547,37 @@ body[data-fontdue-store-modal=open] {
 }
 .cart-item + .cart-item {
   border-top: 1px solid var(--horizontal_rule_color);
-  padding-top: 40px;
 }
-@media (max-width: 899px) {
+@media (max-width: 1199px) {
   .cart-item {
     display: grid;
     grid-template-columns: 1fr auto;
     column-gap: 20px;
+    row-gap: 20px;
     align-items: baseline;
   }
 }
-@media (max-width: 899px) {
-  > div:has(> .cart-item__licenses) {
+@media (max-width: 1199px) {
+  .cart-item > div:has(> .cart-item__licenses) {
     grid-column: 1/-1;
   }
 }
+@media (min-width: 1200px) {
+  .cart-item > div:has(> .cart-item__licenses) {
+    grid-column: name/end;
+  }
+}
 @media (min-width: 900px) {
+  .cart-item {
+    grid-column: 1/-1;
+  }
+}
+@media (min-width: 1200px) {
   .cart-item {
     display: grid;
     align-items: baseline;
     grid-template-columns: subgrid;
-    grid-column: 1/-1;
+    row-gap: 20px;
     padding-bottom: 30px;
     margin-bottom: 0;
   }
@@ -2590,12 +2600,17 @@ body[data-fontdue-store-modal=open] {
 .cart-item__label {
   color: var(--styles-count-color, var(--secondary_text_color));
 }
-@media (max-width: 899px) {
+@media (max-width: 1199px) {
   .cart-item__product {
     grid-column: 1;
     margin-bottom: 20px;
   }
 }
+@media (min-width: 1200px) {
+  .cart-item__product {
+    grid-column: name/price;
+  }
+}
 .cart-item__name {
   font-size: 1em;
   margin-top: 30px; /* line up to the baseline of next column */
@@ -2616,9 +2631,8 @@ body[data-fontdue-store-modal=open] {
   align-items: flex-start;
   gap: 20px;
   padding-top: 20px;
-  padding-bottom: 20px;
 }
-.cart-item:first-child .cart-item__license:first-child {
+.cart-item__license:first-child {
   padding-top: 0;
 }
 @media (pointer: fine) {
@@ -2650,9 +2664,6 @@ body[data-fontdue-store-modal=open] {
 .cart-item__license__delete-button .icon {
   font-size: 16px;
 }
-.cart-item__license + .cart-item__license {
-  border-top: 1px solid var(--horizontal_rule_color);
-}
 .cart-item__license-wrapper {
   flex: 1;
 }
@@ -2759,15 +2770,17 @@ body[data-fontdue-store-modal=open] {
 .cart-item__license-variable__loading {
   padding: 10px;
 }
-@media (max-width: 899px) {
+@media (max-width: 1199px) {
   .cart-item__price {
     grid-column: 2;
     grid-row: 1;
     text-align: right;
   }
 }
-@media (min-width: 900px) {
+@media (min-width: 1200px) {
   .cart-item__price {
+    grid-column: price/end;
+    grid-row: 1;
     display: initial;
     margin-top: 30px;
     text-align: right;
@@ -2780,9 +2793,9 @@ body[data-fontdue-store-modal=open] {
   padding-top: 16px;
   color: var(--additional-license-color, var(--secondary_text_color));
 }
-@media (min-width: 900px) {
+@media (min-width: 1200px) {
   .cart-item__additional-licenses {
-    grid-column-start: licenses;
+    grid-column: name/end;
     padding-top: 10px;
     padding-bottom: 5px;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.25.0",
+  "version": "2.26.0",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",
     "build-js": "babel src --out-dir dist --extensions .ts,.tsx,.js,.jsx",