The default strategy of ScandiPWA font loading is not optimal. Additionally, fonts downloaded from the web are very bloated (containing unused glyphs), there are ways to decrease the font file size. To achieve better performance by optimizing fonts, the following actions are required:
By default ScandiPWA includes fonts that are preloaded from an external source (these might be unused for your application). Also, loading fonts this early does not make sense for SPA:
<!-- Muli font import from Abode -->
<link rel="preload" href="<https://use.typekit.net/fji5tuz.css>" as="style">
<!-- Font -->
<link rel="stylesheet" href="<https://use.typekit.net/fji5tuz.css>">
Remove them from public/index.php
and public/index.html
.
glyphhanger
By default, many fonts contain glyphs unused by the website. Consider the following network requests downloading fonts:
Each of these fonts can be dramatically optimized by including just the necessary glyphs (i.e. german, english, french), down to the following numbers:
To achieve it, first install the fonttools
Python utility, and glyphhanger
CLI:
pip install fonttools
npm i -g glyphhanger
Next, enter the fonts directory and run command optimizing fonts. Few tips:
whitelist
argument should contain all characters to whitelist in the application. Lookup the internet for symbols corresponding locales of your choice.subset
defines the pattern to match path to fonts to processformats
defines the output font format, we suggest using woff2
as most optimalTo optimize woff
fonts for English glyphs, run the following command from fonts directory:
glyphhanger --formats=woff2 --whitelist="AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789!@#$%^&*()[]{}:;\\"'\\|,./<>?=+-_" --subset="*.woff" --css
Finally, update CSS font declarations with newly generated ones:
@font-face {
font-family: "SofiaPro";
font-weight: 200;
font-style: normal;
src: url("../fonts/SofiaPro-ExtraLight-swap.woff2") format("woff2");
font-display: swap;
}
<aside>
🧠To validate glyphs used in fonts, use ctcuff.font-preview
VSCode extension:
Font Preview - Visual Studio Marketplace
</aside>
By default, ScandiPWA ships no font declarations in main.scss
. In case your project adds them in some file, make sure to remove the import of this file from main.scss
. First, create de-prioritization utilities as described in the corresponding article:
How to de-prioritize non-critical requests?
Next, add the following code to the application entry-point (importing the fonts):
waitForPriorityLoad().then(() => import('Style/base/_font.scss'));
<aside> 🎉 This is how you optimize fonts!
</aside>