Don't attempt to prefetch inlined fonts

Munter · Jan 3, 2020 · 844e21e · 844e21e
1 parent 16a0d67
commit 844e21e
Showing 1 changed file with 72 additions and 68 deletions.
diff --git a/lib/subsetFonts.js b/lib/subsetFonts.js
@@ -1091,84 +1091,88 @@ These glyphs are used on your site, but they don't exist in the font you applied
       insertionPoint
     );
 
-    // JS-based font preloading for browsers without <link rel="preload"> support
-    const fontFaceContructorCalls = [];
-
-    cssAsset.parseTree.walkAtRules('font-face', rule => {
-      let name;
-      let url;
-      const props = {};
-
-      rule.walkDecls(({ prop, value }) => {
-        const propName = prop.toLowerCase();
-        if (propName === 'font-weight') {
-          value = value
-            .split(/\s+/)
-            .map(token => normalizeFontPropertyValue('font-weight', token))
-            .join(' ');
-          if (/^\d+$/.test(value)) {
-            value = parseInt(value, 10);
+    let cssAssetInsertion = cssRelation;
+    if (!inlineFonts) {
+      // JS-based font preloading for browsers without <link rel="preload"> support
+      const fontFaceContructorCalls = [];
+
+      cssAsset.parseTree.walkAtRules('font-face', rule => {
+        let name;
+        let url;
+        const props = {};
+
+        rule.walkDecls(({ prop, value }) => {
+          const propName = prop.toLowerCase();
+          if (propName === 'font-weight') {
+            value = value
+              .split(/\s+/)
+              .map(token => normalizeFontPropertyValue('font-weight', token))
+              .join(' ');
+            if (/^\d+$/.test(value)) {
+              value = parseInt(value, 10);
+            }
           }
-        }
 
-        if (propName in initialValueByProp) {
-          if (
-            normalizeFontPropertyValue(propName, value) !==
-            normalizeFontPropertyValue(propName, initialValueByProp[propName])
-          ) {
-            props[propName] = value;
+          if (propName in initialValueByProp) {
+            if (
+              normalizeFontPropertyValue(propName, value) !==
+              normalizeFontPropertyValue(propName, initialValueByProp[propName])
+            ) {
+              props[propName] = value;
+            }
           }
-        }
 
-        if (propName === 'font-family') {
-          name = unquote(value);
-        } else if (propName === 'src') {
-          const fontRelations = cssAsset.outgoingRelations.filter(
-            relation => relation.node === rule
-          );
-          const urlStrings = value
-            .split(/,\s*/)
-            .filter(entry => entry.startsWith('url('));
-          const urlValues = urlStrings.map((urlString, idx) =>
-            urlString.replace(
-              fontRelations[idx].href,
-              '" + "/__subfont__".toString("url") + "'
-            )
-          );
-          url = `"${urlValues.join(', ')}"`;
-        }
+          if (propName === 'font-family') {
+            name = unquote(value);
+          } else if (propName === 'src') {
+            const fontRelations = cssAsset.outgoingRelations.filter(
+              relation => relation.node === rule
+            );
+            const urlStrings = value
+              .split(/,\s*/)
+              .filter(entry => entry.startsWith('url('));
+            const urlValues = urlStrings.map((urlString, idx) =>
+              urlString.replace(
+                fontRelations[idx].href,
+                '" + "/__subfont__".toString("url") + "'
+              )
+            );
+            url = `"${urlValues.join(', ')}"`;
+          }
+        });
+
+        fontFaceContructorCalls.push(
+          `new FontFace("${name}", ${url}, ${JSON.stringify(props)}).load();`
+        );
       });
 
-      fontFaceContructorCalls.push(
-        `new FontFace("${name}", ${url}, ${JSON.stringify(props)}).load();`
+      const jsPreloadRelation = htmlAsset.addRelation(
+        {
+          type: 'HtmlScript',
+          hrefType: 'inline',
+          to: {
+            type: 'JavaScript',
+            text: `try {${fontFaceContructorCalls.join('')}} catch (e) {}`
+          }
+        },
+        'before',
+        cssRelation
       );
-    });
 
-    const jsPreloadRelation = htmlAsset.addRelation(
-      {
-        type: 'HtmlScript',
-        hrefType: 'inline',
-        to: {
-          type: 'JavaScript',
-          text: `try {${fontFaceContructorCalls.join('')}} catch (e) {}`
-        }
-      },
-      'before',
-      cssRelation
-    );
+      for (const [
+        idx,
+        relation
+      ] of jsPreloadRelation.to.outgoingRelations.entries()) {
+        potentiallyOrphanedAssets.add(relation.to);
+        relation.to = cssAsset.outgoingRelations[idx].to;
+        relation.hrefType = 'rootRelative';
+        relation.refreshHref();
+      }
 
-    for (const [
-      idx,
-      relation
-    ] of jsPreloadRelation.to.outgoingRelations.entries()) {
-      potentiallyOrphanedAssets.add(relation.to);
-      relation.to = cssAsset.outgoingRelations[idx].to;
-      relation.hrefType = 'rootRelative';
-      relation.refreshHref();
+      jsPreloadRelation.to.minify();
+      cssAssetInsertion = jsPreloadRelation;
     }
 
-    jsPreloadRelation.to.minify();
-
     if (!omitFallbacks && inlineCss && unusedVariantsCss) {
       // The fallback CSS for unused variants needs to go into its own stylesheet after the crude version of the JS-based preload "polyfill"
       const cssAsset = htmlAsset.addRelation(
@@ -1180,7 +1184,7 @@ These glyphs are used on your site, but they don't exist in the font you applied
           }
         },
         'after',
-        jsPreloadRelation
+        cssAssetInsertion
       ).to;
       for (const relation of cssAsset.outgoingRelations) {
         relation.hrefType = 'rootRelative';