Merge pull request #102 from Munter/fix/noPreloadUnusedVariants

Do not preload unused variants in a self-hosting scenario
Munter · Jul 5, 2020 · d3944a3 · d3944a3
2 parents 8b1d0a1 + fb27142
commit d3944a3
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 9 deletions.
diff --git a/lib/subsetFonts.js b/lib/subsetFonts.js
@@ -1103,7 +1103,10 @@ These glyphs are used on your site, but they don't exist in the font you applied
       for (const fontRelation of cssAsset.outgoingRelations) {
         const fontAsset = fontRelation.to;
 
-        if (fontAsset.contentType === 'font/woff2') {
+        if (
+          fontAsset.contentType === 'font/woff2' &&
+          fontRelation.href.startsWith('/subfont/')
+        ) {
           // Only <link rel="preload"> for woff2 files
           // Preload support is a subset of woff2 support:
           // - https://caniuse.com/#search=woff2

diff --git a/test/subsetFonts.js b/test/subsetFonts.js
@@ -3653,17 +3653,51 @@ describe('subsetFonts', function () {
           text: { $regex: /new FontFace/ },
         });
         expect(preloadPolyfill.text, 'to contain', ".woff2'")
-          .and('to contain', ".woff'")
-          .and('not to contain', ".ttf'")
-          .and('not to contain', 'fonts.gstatic.com');
+          .and('to contain', 'Input_Mono-400')
+          .and('not to contain', 'Input_Mono-700');
         const preloadLinks = assetGraph.findRelations({
           from: htmlAsset,
           type: 'HtmlPreloadLink',
         });
         expect(preloadLinks, 'to satisfy', [
-          { href: /^\/subfont\/Noto_Serif-400-[a-f0-9]{10}\.woff2$/ },
+          { href: /^\/subfont\/Input_Mono-400-[a-f0-9]{10}\.woff2$/ },
         ]);
       });
+
+      describe('with Google Web Fonts', function () {
+        it('should not preload the unused variants', async function () {
+          const assetGraph = new AssetGraph({
+            root: pathModule.resolve(
+              __dirname,
+              '../testdata/subsetFonts/unused-variant-preload-google/'
+            ),
+          });
+          const [htmlAsset] = await assetGraph.loadAssets('index.html');
+          await assetGraph.populate({
+            followRelations: {
+              crossorigin: false,
+            },
+          });
+          await subsetFonts(assetGraph, {
+            inlineFonts: false,
+          });
+          const [preloadPolyfill] = assetGraph.findAssets({
+            type: 'JavaScript',
+            text: { $regex: /new FontFace/ },
+          });
+          expect(preloadPolyfill.text, 'to contain', ".woff2'")
+            .and('to contain', ".woff'")
+            .and('not to contain', ".ttf'")
+            .and('not to contain', 'fonts.gstatic.com');
+          const preloadLinks = assetGraph.findRelations({
+            from: htmlAsset,
+            type: 'HtmlPreloadLink',
+          });
+          expect(preloadLinks, 'to satisfy', [
+            { href: /^\/subfont\/Noto_Serif-400-[a-f0-9]{10}\.woff2$/ },
+          ]);
+        });
+      });
     });
 
     it('should return a fontInfo object with defaulted/normalized props', async function () {

diff --git a/testdata/subsetFonts/unused-variant-preload-google/index.html b/testdata/subsetFonts/unused-variant-preload-google/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Noto+Serif:400,700,400i|Open+Sans:700,400">
+  </head>
+  <body>
+    <div style="font-family: Noto Serif">Hello</div>
+  </body>
+</html>
diff --git a/testdata/subsetFonts/unused-variant-preload/InputMono-Medium.woff2 b/testdata/subsetFonts/unused-variant-preload/InputMono-Medium.woff2
diff --git a/testdata/subsetFonts/unused-variant-preload/InputMono-Regular.woff2 b/testdata/subsetFonts/unused-variant-preload/InputMono-Regular.woff2
diff --git a/testdata/subsetFonts/unused-variant-preload/index.html b/testdata/subsetFonts/unused-variant-preload/index.html
@@ -1,9 +1,24 @@
-<!DOCTYPE html>
-<html>
+<!doctype html>
+<html class="fonts-loaded">
   <head>
-    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Noto+Serif:400,700,400i|Open+Sans:700,400">
+    <style>
+      @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>
-    <div style="font-family: Noto Serif">Hello</div>
+    <code>foo</code>
   </body>
 </html>