Merge pull request #103 from Munter/fix/unusedGlyphsMultipleVariants

Inject unicode-range into all the @font-face declarations for the given family when glyphs are missing

lib/subsetFonts.js

@@ -868,17 +868,21 @@ async function subsetFonts(
           }
         }
         if (missedAny) {
-          const cssFontFaceSrc =
-            accumulatedFontFaceDeclarations[0].relations[0];
-          const fontFaceDeclaration = cssFontFaceSrc.node;
-          if (
-            !fontFaceDeclaration.some((node) => node.prop === 'unicode-range')
-          ) {
-            fontFaceDeclaration.append({
-              prop: 'unicode-range',
-              value: unicodeRange(fontUsage.codepoints.original),
-            });
-            cssFontFaceSrc.from.markDirty();
+          const fontFaces = accumulatedFontFaceDeclarations.filter((fontFace) =>
+            fontUsage.fontFamilies.has(fontFace['font-family'])
+          );
+          for (const fontFace of fontFaces) {
+            const cssFontFaceSrc = fontFace.relations[0];
+            const fontFaceDeclaration = cssFontFaceSrc.node;
+            if (
+              !fontFaceDeclaration.some((node) => node.prop === 'unicode-range')
+            ) {
+              fontFaceDeclaration.append({
+                prop: 'unicode-range',
+                value: unicodeRange(fontUsage.codepoints.original),
+              });
+              cssFontFaceSrc.from.markDirty();
+            }
           }
         }
       }

test/subsetFonts.js

@@ -3236,6 +3236,68 @@ describe('subsetFonts', function () {
         });
       });
 
+      describe('when one out of multiple variants of a font-family has missing glyphs', function () {
+        it('should add a unicode-range property to all of the @font-face declarations of the font-familys', async function () {
+          httpception();
+
+          const assetGraph = new AssetGraph({
+            root: pathModule.resolve(
+              __dirname,
+              '../testdata/subsetFonts/missing-glyphs-multiple-variants/'
+            ),
+          });
+          assetGraph.on('warn', () => {}); // Don't fail due to the missing glyphs warning
+
+          await assetGraph.loadAssets('index.html');
+          await assetGraph.populate({
+            followRelations: {
+              crossorigin: false,
+            },
+          });
+          await subsetFonts(assetGraph, {
+            inlineFonts: false,
+          });
+
+          const [outputSansRegularRelation] = assetGraph.findRelations({
+            type: 'CssFontFaceSrc',
+            to: { fileName: 'OutputSans-Regular.woff2' },
+          });
+          expect(
+            outputSansRegularRelation.node.toString(),
+            'not to contain',
+            'unicode-range:'
+          );
+          const [outputSansBoldRelation] = assetGraph.findRelations({
+            type: 'CssFontFaceSrc',
+            to: { fileName: 'OutputSans-Bold.woff2' },
+          });
+          expect(
+            outputSansBoldRelation.node.toString(),
+            'not to contain',
+            'unicode-range:'
+          );
+
+          const [inputMonoRegularRelation] = assetGraph.findRelations({
+            type: 'CssFontFaceSrc',
+            to: { fileName: 'InputMono-Regular.woff2' },
+          });
+          expect(
+            inputMonoRegularRelation.node.toString(),
+            'to contain',
+            'unicode-range:U+'
+          );
+          const [inputMonoBoldRelation] = assetGraph.findRelations({
+            type: 'CssFontFaceSrc',
+            to: { fileName: 'InputMono-Medium.woff2' },
+          });
+          expect(
+            inputMonoBoldRelation.node.toString(),
+            'to contain',
+            'unicode-range:U+'
+          );
+        });
+      });
+
       describe('when the original @font-face declaration already contains a unicode-range property', function () {
         it('should leave the existing unicode-range alone', async function () {
           httpception();

testdata/subsetFonts/missing-glyphs-multiple-variants/index.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html class="fonts-loaded">
+  <head>
+    <style>
+      @font-face {
+        font-family: Output Sans;
+        src: url(OutputSans-Regular.woff2) format("woff2");
+      }
+
+      @font-face {
+        font-family: Output Sans;
+        src: url(OutputSans-Bold.woff2) format("woff2");
+        font-weight: 700;
+      }
+
+      @font-face {
+        font-family: Input Mono;
+        src: url(InputMono-Regular.woff2) format("woff2");
+      }
+
+      @font-face {
+        font-family: Input Mono;
+        src: url(InputMono-Medium.woff2) format("woff2");
+        font-weight: 700;
+      }
+
+      code {
+        font-family: Input Mono, monospace;
+      }
+    </style>
+  </head>
+  <body>
+    <pre><code>load('中国').then(<strong>function</strong></code></pre>
+
+    <div style="font-family: Output Sans">Hello!</div>
+  </body>
+</html>