diff --git a/lib/subsetFonts.js b/lib/subsetFonts.js
index b4b2ba06..d90b00f5 100644
--- 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 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
index f452dca3..e10dd3a1 100644
--- 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
new file mode 100644
index 00000000..0901e019
--- /dev/null
+++ b/testdata/subsetFonts/unused-variant-preload-google/index.html
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+ Hello
+
+
diff --git a/testdata/subsetFonts/unused-variant-preload/InputMono-Medium.woff2 b/testdata/subsetFonts/unused-variant-preload/InputMono-Medium.woff2
new file mode 100644
index 00000000..8f416f16
Binary files /dev/null and b/testdata/subsetFonts/unused-variant-preload/InputMono-Medium.woff2 differ
diff --git a/testdata/subsetFonts/unused-variant-preload/InputMono-Regular.woff2 b/testdata/subsetFonts/unused-variant-preload/InputMono-Regular.woff2
new file mode 100644
index 00000000..b81f0039
Binary files /dev/null and b/testdata/subsetFonts/unused-variant-preload/InputMono-Regular.woff2 differ
diff --git a/testdata/subsetFonts/unused-variant-preload/index.html b/testdata/subsetFonts/unused-variant-preload/index.html
index 0901e019..b0451297 100644
--- a/testdata/subsetFonts/unused-variant-preload/index.html
+++ b/testdata/subsetFonts/unused-variant-preload/index.html
@@ -1,9 +1,24 @@
-
-
+
+
-
+
- Hello
+ foo