diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7dfe19deb8..39264f9392 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## Draft
+- Cornerstone performance optimizations: blocking scripts delaying DomContentLoaded. [#2158](https://github.com/bigcommerce/cornerstone/pull/2158)
- Cornerstone performance optimizations: remove unused fonts. [#2176](https://github.com/bigcommerce/cornerstone/pull/2176)
- Update stencil-utils package. [#2157](https://github.com/bigcommerce/cornerstone/pull/2157)
diff --git a/assets/js/theme/common/font.js b/assets/js/theme/common/font.js
new file mode 100644
index 0000000000..0649314b8a
--- /dev/null
+++ b/assets/js/theme/common/font.js
@@ -0,0 +1,13 @@
+const WebFont = require('webfontloader');
+
+const linkEl = document.querySelector('link[href*="https://fonts.googleapis.com/css"]');
+const fontUrl = linkEl.getAttribute('href');
+const regexFontsCollection = /family=([^&]*)/gm;
+const families = regexFontsCollection.exec(fontUrl)[1].replace(/\+/gm, ' ').split('|');
+
+WebFont.load({
+ custom: {
+ families,
+ },
+ classes: false,
+});
diff --git a/package-lock.json b/package-lock.json
index 79d21083d5..f98922638a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21330,6 +21330,11 @@
}
}
},
+ "webfontloader": {
+ "version": "1.6.28",
+ "resolved": "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz",
+ "integrity": "sha1-23hhKSU8tujq5UwvsF+HCvZnW64="
+ },
"webidl-conversions": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
diff --git a/package.json b/package.json
index 3c5615bdfa..b5e01a2265 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
"slick-carousel": "^1.8.1",
"svg-injector": "^1.1.3",
"sweetalert2": "^9.17.2",
+ "webfontloader": "^1.6.28",
"whatwg-fetch": "^3.6.1"
},
"devDependencies": {
diff --git a/templates/layout/base.html b/templates/layout/base.html
index 9ce3d896f1..b2c78ec9a0 100644
--- a/templates/layout/base.html
+++ b/templates/layout/base.html
@@ -25,19 +25,12 @@
window.lazySizesConfig.loadMode = 1;
+
+ {{getFontsCollection font-display='block'}}
+
+
+
-
-
-
-
- {{ getFontsCollection }}
{{{stylesheet '/assets/css/theme.css'}}}
{{{head.scripts}}}
@@ -58,6 +51,9 @@
{{~inject 'carouselArrowAndDotAriaLabel' (lang 'carousel.arrow_and_dot_aria_label')}}
{{~inject 'carouselActiveDotAriaLabel' (lang 'carousel.active_dot_aria_label')}}
{{~inject 'carouselContentAnnounceMessage' (lang 'carousel.content_announce_message')}}
+
+ {{!-- Get this loading ASAP --}}
+
@@ -67,11 +63,13 @@
{{> components/common/footer }}
-
+
{{{footer.scripts}}}
diff --git a/webpack.common.js b/webpack.common.js
index 7603dff18b..28526b2312 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -11,6 +11,7 @@ module.exports = {
entry: {
main: './assets/js/app.js',
head_async: ['lazysizes'],
+ font: './assets/js/theme/common/font.js',
polyfills: './assets/js/polyfills.js',
},
module: {