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:

1. Remove preloads from HTML document

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.

2. Optimize application fonts using glyphhanger

By default, many fonts contain glyphs unused by the website. Consider the following network requests downloading fonts:

Screenshot 2023-01-23 at 19.31.35.png

Each of these fonts can be dramatically optimized by including just the necessary glyphs (i.e. german, english, french), down to the following numbers:

Screenshot 2023-01-23 at 19.49.39.png

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:

To 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>

3. De-prioritize font loading

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>