subfont 6.9.0 → 6.12.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+### v6.12.0 (2022-09-07)
+
+- [Refactor repeated code into helper function](https://github.com/Munter/subfont/commit/5335d931957cadc150fed1c5d548ee6b6e245636) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Clamp the used variation axis values to the available interval](https://github.com/Munter/subfont/commit/1429c0f35720ee8dadb691138eb4cfa3c1c86150) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Detech unused slnt variation axis ranges](https://github.com/Munter/subfont/commit/dc4be1598ba1ba0e65d8269d0fa2d25aa528357d) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Report variation axes that only use the default value as unused rather than underutilized](https://github.com/Munter/subfont/commit/12082590898407f558d9540347778272ddb9d197) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Detect unused wdth variation axis ranges](https://github.com/Munter/subfont/commit/d7758eb3c9a45a49768aac12c36ed897a0c4b467) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+
+### v6.11.0 (2022-09-04)
+
+- [Treat wdth as a standard axis \(but unsupported for now\)](https://github.com/Munter/subfont/commit/20d539750448134cca0a82f2cc98f85d9a6be068) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Detect unused ital variation axis ranges](https://github.com/Munter/subfont/commit/b848b21b66cdbcd0ff313690ba49a4bc9b9f90a4) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Don't assume that the display name of a variation axis equals its name](https://github.com/Munter/subfont/commit/4fcf7df801de01b2d3aef3d5f1ea3d697779ffda) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Detect unused wght variation axis ranges](https://github.com/Munter/subfont/commit/6a964d609f21bf2c9dad96da1d16d9c32c28dbfd) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+
+### v6.10.0 (2022-08-29)
+
+- [Update @hookun\/parse-animation-shorthand to ^0.1.4 to make sure we get the fix for hookhookun\/parse-animation-shorthand\#16](https://github.com/Munter/subfont/commit/4db17826245e289e987c6dc02d3f67ebf5891e6f) ([Andreas Lind](mailto:andreas.lind@workday.com))
+- [Disable notice about unused variation axis ranges when there's an out-of-bounds cubic-bezier animation timing function in play](https://github.com/Munter/subfont/commit/1cf4ff46bb6099f8df8602968c7dc0fefb1c1f21) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Update font-tracer to ^3.6.0](https://github.com/Munter/subfont/commit/2a47adc03122aad50ba2a01f116a2d1fe0f2b29e) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Remove accidentally committed commented out code](https://github.com/Munter/subfont/commit/e0c677f9b2c7a9af123045cf29bc78a4f9a56550) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [Warn about unused variation axis ranges, not just fully unused axes](https://github.com/Munter/subfont/commit/32fc472327b1c8fc87090d4c1e5f1085533ad8fa) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))
+- [+13 more](https://github.com/Munter/subfont/compare/v6.9.0...v6.10.0)
+
 ### v6.9.0 (2022-08-07)
 
 - [Update font-tracer to ^3.3.0 Adds support for tracing ::marker, fixes \#166](https://github.com/Munter/subfont/commit/e46c79bac9cb3e62c70deb357823b7963114863b) ([Andreas Lind](mailto:andreaslindpetersen@gmail.com))

package/lib/getCssRulesByProperty.js

@@ -1,6 +1,7 @@
 const specificity = require('specificity');
 const postcss = require('postcss');
 const unquote = require('./unquote');
+const parseAnimationShorthand = require('@hookun/parse-animation-shorthand');
 
 const counterRendererNames = new Set([
   'none',
@@ -144,34 +145,59 @@ function getCssRulesByProperty(properties, cssSource, existingPredicates) {
               });
             });
         }
-      } else if (
-        propName === 'animation' &&
-        properties.includes('animation-name')
-      ) {
+      } else if (propName === 'animation') {
         // Shorthand
-        const animationName = node.value.split(' ').pop();
+        const parsedAnimation = parseAnimationShorthand.parseSingle(node.value);
 
-        // Split up combined selectors as they might have different specificity
-        specificity
-          .calculate(node.parent.selector)
-          .forEach((specificityObject) => {
-            const isStyleAttribute =
-              specificityObject.selector === 'bogusselector';
+        if (properties.includes('animation-name')) {
+          // Split up combined selectors as they might have different specificity
+          specificity
+            .calculate(node.parent.selector)
+            .forEach((specificityObject) => {
+              const isStyleAttribute =
+                specificityObject.selector === 'bogusselector';
 
-            rulesByProperty['animation-name'].push({
-              predicates: getCurrentPredicates(),
-              namespaceURI: defaultNamespaceURI,
-              selector: isStyleAttribute
-                ? undefined
-                : specificityObject.selector.trim(),
-              specificityArray: isStyleAttribute
-                ? [1, 0, 0, 0]
-                : specificityObject.specificityArray,
-              prop: 'animation-name',
-              value: animationName,
-              important: !!node.important,
+              rulesByProperty['animation-name'].push({
+                predicates: getCurrentPredicates(),
+                namespaceURI: defaultNamespaceURI,
+                selector: isStyleAttribute
+                  ? undefined
+                  : specificityObject.selector.trim(),
+                specificityArray: isStyleAttribute
+                  ? [1, 0, 0, 0]
+                  : specificityObject.specificityArray,
+                prop: 'animation-name',
+                value: parsedAnimation.name,
+                important: !!node.important,
+              });
             });
-          });
+        }
+        if (properties.includes('animation-timing-function')) {
+          // Split up combined selectors as they might have different specificity
+          specificity
+            .calculate(node.parent.selector)
+            .forEach((specificityObject) => {
+              const isStyleAttribute =
+                specificityObject.selector === 'bogusselector';
+
+              rulesByProperty['animation-timing-function'].push({
+                predicates: getCurrentPredicates(),
+                namespaceURI: defaultNamespaceURI,
+                selector: isStyleAttribute
+                  ? undefined
+                  : specificityObject.selector.trim(),
+                specificityArray: isStyleAttribute
+                  ? [1, 0, 0, 0]
+                  : specificityObject.specificityArray,
+                prop: 'animation-timing-function',
+                value: parseAnimationShorthand.serialize({
+                  name: '',
+                  timingFunction: parsedAnimation.timingFunction,
+                }),
+                important: !!node.important,
+              });
+            });
+        }
       } else if (propName === 'transition') {
         // Shorthand
         const transitionProperties = [];

package/lib/normalizeFontPropertyValue.js

@@ -1,6 +1,7 @@
 const cssFontWeightNames = require('css-font-weight-names');
 const initialValueByProp = require('./initialValueByProp');
 const unquote = require('./unquote');
+const normalizeFontStretch = require('font-snapper/lib/normalizeFontStretch');
 
 function normalizeFontPropertyValue(propName, value) {
   const propNameLowerCase = propName.toLowerCase();
@@ -22,6 +23,8 @@ function normalizeFontPropertyValue(propName, value) {
     } else {
       return value;
     }
+  } else if (propNameLowerCase === 'font-stretch') {
+    return normalizeFontStretch(value);
   } else if (typeof value === 'string' && propNameLowerCase !== 'src') {
     return value.toLowerCase();
   }

package/lib/parseFontVariationSettings.js

@@ -0,0 +1,39 @@
+const postcssValueParser = require('postcss-value-parser');
+
+module.exports = function* parseFontVariationSettings(value) {
+  let state = 'BEFORE_AXIS_NAME';
+  let axisName;
+  for (const token of postcssValueParser(value).nodes) {
+    if (token.type === 'space') {
+      continue;
+    }
+    switch (state) {
+      case 'BEFORE_AXIS_NAME': {
+        if (token.type !== 'string') {
+          return;
+        }
+        axisName = token.value;
+        state = 'AFTER_AXIS_NAME';
+        break;
+      }
+      case 'AFTER_AXIS_NAME': {
+        if (token.type === 'word') {
+          const axisValue = parseFloat(token.value);
+          if (!isNaN(axisValue)) {
+            yield [axisName, axisValue];
+          }
+        }
+        state = 'AFTER_AXIS_VALUE';
+        break;
+      }
+      case 'AFTER_AXIS_VALUE': {
+        if (token.type !== 'div' || token.value !== ',') {
+          return;
+        }
+        axisName = undefined;
+        state = 'BEFORE_AXIS_NAME';
+        break;
+      }
+    }
+  }
+};

package/lib/subsetFonts.js

@@ -13,13 +13,14 @@ const HeadlessBrowser = require('./HeadlessBrowser');
 const gatherStylesheetsWithPredicates = require('./gatherStylesheetsWithPredicates');
 const findCustomPropertyDefinitions = require('./findCustomPropertyDefinitions');
 const extractReferencedCustomPropertyNames = require('./extractReferencedCustomPropertyNames');
+const parseFontVariationSettings = require('./parseFontVariationSettings');
+const parseAnimationShorthand = require('@hookun/parse-animation-shorthand');
 const stripLocalTokens = require('./stripLocalTokens');
 const injectSubsetDefinitions = require('./injectSubsetDefinitions');
 const cssFontParser = require('css-font-parser');
 const cssListHelpers = require('css-list-helpers');
 const LinesAndColumns = require('lines-and-columns').default;
 const fontkit = require('fontkit');
-const fontFamily = require('font-family-papandreou');
 const crypto = require('crypto');
 
 const unquote = require('./unquote');
@@ -41,6 +42,14 @@ const contentTypeByFontFormat = {
   truetype: 'font/ttf',
 };
 
+function stringifyFontFamily(name) {
+  if (/[^a-z0-9_-]/i.test(name)) {
+    return name.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+  } else {
+    return name;
+  }
+}
+
 function uniqueChars(text) {
   return [...new Set([...text])].sort().join('');
 }
@@ -79,6 +88,21 @@ function getPreferredFontUrl(cssFontFaceSrcRelations = []) {
   }
 }
 
+function isOutOfBoundsAnimationTimingFunction(animationTimingFunctionStr) {
+  if (typeof animationTimingFunctionStr !== 'string') {
+    return false;
+  }
+  const { timingFunction } = parseAnimationShorthand.parseSingle(
+    `${animationTimingFunctionStr} ignored-name`
+  );
+
+  if (timingFunction.type === 'cubic-bezier') {
+    const [, y1, , y2] = timingFunction.value;
+    return y1 > 1 || y1 < 0 || y2 > 1 || y2 < 0;
+  }
+  return false;
+}
+
 // Hack to extract '@font-face { ... }' with all absolute urls
 function getFontFaceDeclarationText(node, relations) {
   const originalHrefTypeByRelation = new Map();
@@ -145,8 +169,8 @@ function groupTextsByFontFamilyProps(
         return [];
       }
       // Find all the families in the traced font-family that we have @font-face declarations for:
-      const families = fontFamily
-        .parse(family)
+      const families = cssFontParser
+        .parseFontFamily(family)
         .filter((family) =>
           availableFontFaceDeclarations.some(
             (fontFace) =>
@@ -159,7 +183,7 @@ function groupTextsByFontFamilyProps(
           availableFontFaceDeclarations,
           {
             ...textAndProps.props,
-            'font-family': fontFamily.stringify([family]),
+            'font-family': stringifyFontFamily(family),
           }
         );
 
@@ -170,9 +194,31 @@ function groupTextsByFontFamilyProps(
         const { relations, ...props } = activeFontFaceDeclaration;
         const fontUrl = getPreferredFontUrl(relations);
 
+        const fontStyle = normalizeFontPropertyValue(
+          'font-style',
+          textAndProps.props['font-style']
+        );
+
+        let fontWeight = normalizeFontPropertyValue(
+          'font-weight',
+          textAndProps.props['font-weight']
+        );
+        if (fontWeight === 'normal') {
+          fontWeight = 400;
+        }
+
         return {
           htmlOrSvgAsset: textAndProps.htmlOrSvgAsset,
           text: textAndProps.text,
+          fontVariationSettings: textAndProps.props['font-variation-settings'],
+          fontStyle,
+          fontWeight,
+          fontStretch: normalizeFontPropertyValue(
+            'font-stretch',
+            textAndProps.props['font-stretch']
+          ),
+          animationTimingFunction:
+            textAndProps.props['animation-timing-function'],
           props,
           fontRelations: relations,
           fontUrl,
@@ -190,6 +236,23 @@ function groupTextsByFontFamilyProps(
     const fontFamilies = new Set(
       textsPropsArray.map((obj) => obj.props['font-family'])
     );
+    const fontStyles = new Set(textsPropsArray.map((obj) => obj.fontStyle));
+    const fontWeights = new Set(textsPropsArray.map((obj) => obj.fontWeight));
+    const fontStretches = new Set(
+      textsPropsArray.map((obj) => obj.fontStretch)
+    );
+    const fontVariationSettings = new Set(
+      textsPropsArray
+        .map((obj) => obj.fontVariationSettings)
+        .filter(
+          (fontVariationSettings) =>
+            fontVariationSettings &&
+            fontVariationSettings.toLowerCase() !== 'normal'
+        )
+    );
+    const hasOutOfBoundsAnimationTimingFunction = textsPropsArray.some((obj) =>
+      isOutOfBoundsAnimationTimingFunction(obj.animationTimingFunction)
+    );
 
     let smallestOriginalSize;
     let smallestOriginalFormat;
@@ -217,6 +280,11 @@ function groupTextsByFontFamilyProps(
       props: { ...textsPropsArray[0].props },
       fontUrl,
       fontFamilies,
+      fontStyles,
+      fontStretches,
+      fontWeights,
+      fontVariationSettings,
+      hasOutOfBoundsAnimationTimingFunction,
       preload,
     };
   });
@@ -497,9 +565,9 @@ async function createSelfHostedGoogleFontsCssAsset(
   assetGraph,
   googleFontsCssAsset,
   formats,
-  hrefType
+  hrefType,
+  subsetUrl
 ) {
-  const baseUrl = assetGraph.resolveUrl(assetGraph.root, '/subfont/');
   const lines = [];
   for (const cssFontFaceSrc of assetGraph.findRelations({
     from: googleFontsCssAsset,
@@ -516,9 +584,12 @@ async function createSelfHostedGoogleFontsCssAsset(
     const srcFragments = [];
     for (const format of formats) {
       const rawSrc = await fontverter.convert(cssFontFaceSrc.to.rawSrc, format);
-      const url = `${assetGraph.root}subfont/${
-        cssFontFaceSrc.to.baseName
-      }-${md5HexPrefix(rawSrc)}${extensionByFormat[format]}`;
+      const url = assetGraph.resolveUrl(
+        subsetUrl,
+        `${cssFontFaceSrc.to.baseName}-${md5HexPrefix(rawSrc)}${
+          extensionByFormat[format]
+        }`
+      );
       const fontAsset =
         assetGraph.findAssets({ url })[0] ||
         (await assetGraph.addAsset({
@@ -526,7 +597,7 @@ async function createSelfHostedGoogleFontsCssAsset(
           rawSrc,
         }));
       srcFragments.push(
-        `url(${assetGraph.buildHref(fontAsset.url, baseUrl, {
+        `url(${assetGraph.buildHref(fontAsset.url, subsetUrl, {
           hrefType,
         })}) format('${format}')`
       );
@@ -542,7 +613,7 @@ async function createSelfHostedGoogleFontsCssAsset(
   const text = lines.join('\n');
   const fallbackAsset = assetGraph.addAsset({
     type: 'Css',
-    url: `/subfont/fallback-${md5HexPrefix(text)}.css`,
+    url: assetGraph.resolveUrl(subsetUrl, `fallback-${md5HexPrefix(text)}.css`),
     text,
   });
   return fallbackAsset;
@@ -574,6 +645,46 @@ function cssAssetIsEmpty(cssAsset) {
   );
 }
 
+function parseFontWeightRange(str) {
+  if (typeof str === 'undefined' || str === 'auto') {
+    return [-Infinity, Infinity];
+  }
+  let minFontWeight = 400;
+  let maxFontWeight = 400;
+  const fontWeightTokens = str.split(/\s+/).map((str) => parseFloat(str));
+  if (
+    [1, 2].includes(fontWeightTokens.length) &&
+    !fontWeightTokens.some(isNaN)
+  ) {
+    minFontWeight = maxFontWeight = fontWeightTokens[0];
+    if (fontWeightTokens.length === 2) {
+      maxFontWeight = fontWeightTokens[1];
+    }
+  }
+  return [minFontWeight, maxFontWeight];
+}
+
+function parseFontStretchRange(str) {
+  if (typeof str === 'undefined' || str.toLowerCase() === 'auto') {
+    return [-Infinity, Infinity];
+  }
+  let minFontStretch = 100;
+  let maxFontStretch = 100;
+  const fontStretchTokens = str
+    .split(/\s+/)
+    .map((str) => normalizeFontPropertyValue('font-stretch', str));
+  if (
+    [1, 2].includes(fontStretchTokens.length) &&
+    !fontStretchTokens.some(isNaN)
+  ) {
+    minFontStretch = maxFontStretch = fontStretchTokens[0];
+    if (fontStretchTokens.length === 2) {
+      maxFontStretch = fontStretchTokens[1];
+    }
+  }
+  return [minFontStretch, maxFontStretch];
+}
+
 function warnAboutMissingGlyphs(htmlOrSvgAssetTextsWithProps, assetGraph) {
   const missingGlyphsErrors = [];
 
@@ -664,6 +775,183 @@ These glyphs are used on your site, but they don't exist in the font you applied
   }
 }
 
+const standardVariationAxes = new Set(['wght', 'wdth', 'ital', 'slnt', 'opsz']);
+// It would be very hard to trace statically which values of opsz (font-optical-sizing)
+// are going to be used, so we ignore that one:
+const ignoredVariationAxes = new Set(['opsz']);
+
+function renderNumberRange(min, max) {
+  if (min === max) {
+    return String(min);
+  } else {
+    return `${min}-${max}`;
+  }
+}
+
+function warnAboutUnusedVariationAxes(
+  htmlOrSvgAssetTextsWithProps,
+  assetGraph
+) {
+  const seenAxisValuesByFontUrlAndAxisName = new Map();
+  const outOfBoundsAxesByFontUrl = new Map();
+
+  function noteUsedValue(fontUrl, axisName, axisValue) {
+    let seenAxes = seenAxisValuesByFontUrlAndAxisName.get(fontUrl);
+    if (!seenAxes) {
+      seenAxes = new Map();
+      seenAxisValuesByFontUrlAndAxisName.set(fontUrl, seenAxes);
+    }
+    if (seenAxes.has(axisName)) {
+      seenAxes.get(axisName).push(axisValue);
+    } else {
+      seenAxes.set(axisName, [axisValue]);
+    }
+  }
+
+  for (const { fontUsages } of htmlOrSvgAssetTextsWithProps) {
+    for (const {
+      fontUrl,
+      fontStyles,
+      fontWeights,
+      fontStretches,
+      fontVariationSettings,
+      hasOutOfBoundsAnimationTimingFunction,
+      props,
+    } of fontUsages) {
+      if (fontStyles.has('italic')) {
+        noteUsedValue(fontUrl, 'ital', 1);
+      }
+      // If any font-style value except italic is seen (including normal or oblique)
+      // we're also utilizing value 0:
+      if (fontStyles.size > fontStyles.has('italic') ? 1 : 0) {
+        noteUsedValue(fontUrl, 'ital', 0);
+      }
+      if (fontStyles.has('oblique')) {
+        // https://www.w3.org/TR/css-fonts-4/#font-style-prop
+        // oblique <angle>?
+        // [...] The lack of an <angle> represents 14deg.
+        noteUsedValue(fontUrl, 'slnt', 14);
+      }
+      // If any font-style value except oblique is seen (including normal or italic)
+      // we're also utilizing value 0:
+      if (fontStyles.size > fontStyles.has('oblique') ? 1 : 0) {
+        noteUsedValue(fontUrl, 'slnt', 0);
+      }
+
+      const minMaxFontWeight = parseFontWeightRange(props['font-weight']);
+      for (const fontWeight of fontWeights) {
+        noteUsedValue(
+          fontUrl,
+          'wght',
+          _.clamp(fontWeight, ...minMaxFontWeight)
+        );
+      }
+
+      const minMaxFontStretch = parseFontStretchRange(props['font-stretch']);
+      for (const fontStrech of fontStretches) {
+        noteUsedValue(
+          fontUrl,
+          'wdth',
+          _.clamp(fontStrech, ...minMaxFontStretch)
+        );
+      }
+
+      for (const fontVariationSettingsValue of fontVariationSettings) {
+        for (const [axisName, axisValue] of parseFontVariationSettings(
+          fontVariationSettingsValue
+        )) {
+          noteUsedValue(fontUrl, axisName, axisValue);
+          if (hasOutOfBoundsAnimationTimingFunction) {
+            let outOfBoundsAxes = outOfBoundsAxesByFontUrl.get(fontUrl);
+            if (!outOfBoundsAxes) {
+              outOfBoundsAxes = new Set();
+              outOfBoundsAxesByFontUrl.set(fontUrl, outOfBoundsAxes);
+            }
+            outOfBoundsAxes.add(axisName);
+          }
+        }
+      }
+    }
+  }
+
+  const warnings = [];
+  for (const [
+    fontUrl,
+    seenAxisValuesByAxisName,
+  ] of seenAxisValuesByFontUrlAndAxisName.entries()) {
+    const outOfBoundsAxes = outOfBoundsAxesByFontUrl.get(fontUrl) || new Set();
+    let font;
+    try {
+      font = fontkit.create(assetGraph.findAssets({ url: fontUrl })[0].rawSrc);
+    } catch (err) {
+      // Don't break if we encounter an invalid font or one that's unsupported by fontkit
+      continue;
+    }
+    const unusedAxes = [];
+    const underutilizedAxes = [];
+    for (const [name, { min, max, default: defaultValue }] of Object.entries(
+      font.variationAxes
+    )) {
+      if (ignoredVariationAxes.has(name)) {
+        continue;
+      }
+      let usedValues = [];
+      if (seenAxisValuesByAxisName.has(name) && !outOfBoundsAxes.has(name)) {
+        usedValues = [...seenAxisValuesByAxisName.get(name)].map((usedValue) =>
+          _.clamp(usedValue, min, max)
+        );
+      }
+      if (!usedValues.every((value) => value === defaultValue)) {
+        if (!standardVariationAxes.has(name)) {
+          usedValues.push(defaultValue);
+        }
+        const minUsed = Math.min(...usedValues);
+        const maxUsed = Math.max(...usedValues);
+        if (minUsed > min || maxUsed < max) {
+          underutilizedAxes.push({
+            name,
+            minUsed,
+            maxUsed,
+            min,
+            max,
+          });
+        }
+      } else {
+        unusedAxes.push(name);
+      }
+    }
+
+    if (unusedAxes.length > 0 || underutilizedAxes.length > 0) {
+      let message = `${fontUrl}:\n`;
+      if (unusedAxes.length > 0) {
+        message += `  Unused axes: ${unusedAxes.join(', ')}\n`;
+      }
+      if (underutilizedAxes.length > 0) {
+        message += `  Underutilized axes:\n${underutilizedAxes
+          .map(
+            ({ name, min, max, minUsed, maxUsed }) =>
+              `    ${name}: ${renderNumberRange(
+                minUsed,
+                maxUsed
+              )} used (${min}-${max} available)`
+          )
+          .join('\n')}\n`;
+      }
+      warnings.push(message);
+    }
+  }
+
+  if (warnings.length > 0) {
+    assetGraph.info(
+      new Error(`🪓 Unused variation axes detected in your variable fonts.
+The below variable fonts contain custom axes that do not appear to be fully used on any of your pages.
+This bloats your fonts and also the subset fonts that subfont creates.
+Consider removing the unused axis ranges using a tool like Slice <https://slice-gui.netlify.app/>
+${warnings.join('\n')}`)
+    );
+  }
+}
+
 async function collectTextsByPage(
   assetGraph,
   htmlOrSvgAssets,
@@ -722,9 +1010,8 @@ async function collectTextsByPage(
                 node.walkDecls((declaration) => {
                   const propName = declaration.prop.toLowerCase();
                   if (propName === 'font-family') {
-                    fontFaceDeclaration[propName] = fontFamily.parse(
-                      declaration.value
-                    )[0];
+                    fontFaceDeclaration[propName] =
+                      cssFontParser.parseFontFamily(declaration.value)[0];
                   } else {
                     fontFaceDeclaration[propName] = declaration.value;
                   }
@@ -951,6 +1238,7 @@ async function subsetFonts(
   );
 
   warnAboutMissingGlyphs(htmlOrSvgAssetTextsWithProps, assetGraph);
+  warnAboutUnusedVariationAxes(htmlOrSvgAssetTextsWithProps, assetGraph);
 
   // Insert subsets:
 
@@ -1119,7 +1407,7 @@ async function subsetFonts(
 
       if (
         fontAsset.contentType === 'font/woff2' &&
-        fontRelation.to.path.startsWith('/subfont/')
+        fontRelation.to.url.startsWith(subsetUrl)
       ) {
         const fontFaceDeclaration = fontRelation.node;
         const originalFontFamily = unquote(
@@ -1323,7 +1611,8 @@ async function subsetFonts(
                 assetGraph,
                 googleFontStylesheetRelation.to,
                 formats,
-                hrefType
+                hrefType,
+                subsetUrl
               );
             await selfHostedGoogleFontsCssAsset.minify();
             selfHostedGoogleCssByUrl.set(
@@ -1388,7 +1677,9 @@ async function subsetFonts(
       );
       for (let i = 0; i < fontFamilies.length; i += 1) {
         const subsetFontFamily =
-          webfontNameMap[fontFamily.parse(fontFamilies[i])[0].toLowerCase()];
+          webfontNameMap[
+            cssFontParser.parseFontFamily(fontFamilies[i])[0].toLowerCase()
+          ];
         if (subsetFontFamily && !fontFamilies.includes(subsetFontFamily)) {
           fontFamilies.splice(
             i,
@@ -1448,7 +1739,7 @@ async function subsetFonts(
           for (let i = 0; i < fontFamilies.length; i += 1) {
             const subsetFontFamily =
               webfontNameMap[
-                fontFamily.parse(fontFamilies[i])[0].toLowerCase()
+                cssFontParser.parseFontFamily(fontFamilies[i])[0].toLowerCase()
               ];
             if (subsetFontFamily && !fontFamilies.includes(subsetFontFamily)) {
               fontFamilies.splice(
@@ -1462,7 +1753,7 @@ async function subsetFonts(
             }
           }
         } else if (propName === 'font') {
-          const fontProperties = cssFontParser(cssRule.value);
+          const fontProperties = cssFontParser.parseFont(cssRule.value);
           const fontFamilies =
             fontProperties && fontProperties['font-family'].map(unquote);
           if (fontFamilies) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "subfont",
-  "version": "6.9.0",
+  "version": "6.12.0",
   "description": "Speeds up your pages initial paint by automatically subsetting local or Google fonts and loading them optimally",
   "engines": {
     "node": ">=10.0.0"
@@ -47,14 +47,14 @@
   "homepage": "https://github.com/Munter/subfont#readme",
   "dependencies": {
     "@gustavnikolaj/async-main-wrap": "^3.0.1",
+    "@hookun/parse-animation-shorthand": "^0.1.4",
     "assetgraph": "^7.8.1",
     "browserslist": "^4.13.0",
-    "css-font-parser": "^0.3.0",
+    "css-font-parser": "^2.0.0",
     "css-font-weight-names": "^0.2.1",
     "css-list-helpers": "^2.0.0",
-    "font-family-papandreou": "^0.2.0-patch2",
     "font-snapper": "^1.2.0",
-    "font-tracer": "^3.3.0",
+    "font-tracer": "^3.6.0",
     "fontkit": "^1.8.0",
     "fontverter": "^2.0.0",
     "gettemporaryfilepath": "^1.0.1",