Get NitroPack with up to 37% OFF
Once you start with NitroPack, you can freely choose your integration platform.
Everything you need to know about
NitroPack features and compatibilities.
Whether you run a blog or
an agency, we have a
partnership opportunity for you!
The place to learn how to
improve your web performance,
how to get the most out of
NitroPack, and what is coming
next to our product.
Fonts - a fundamental part of every website, however, they seem to be neglected when it comes to their web performance optimization, with image and code optimization occupying the top spots.
Well, not anymore!
We're happy to announce that our Font Subsetting feature is now live and available for all NitroPack users on a Scale plan.
The latest addition to our feature portfolio comes to fruition after months of developing and fine-tuning (special thanks to our Speed Insiders).
In this article, we will focus on a few topics:
Let's begin!
According to the Web Almanac: "Web font usage has been growing steadily over time (it was near zero as late as 2011), with 82% of web pages for desktop using web fonts, and mobile at 80%."
Fonts are often linked in external (third-party) CSS stylesheets or directly in the head tag of your HTML markup:
By default, CSS files are render-blocking resources which means that when the browser encounters them, it must download, parse, and execute these files first before doing anything else.
They "block" the browser's Main Thread, and crucial actions like content visualization (rendering) cannot be performed in a fast manner.
Using unoptimized font files on your website can drastically slow down the rendering process, resulting in poor CLS and LCP scores, a bad user experience, and increased bounce rates.
With this new feature, we added another layer of optimization focused on improving the rendering experience.
Here's how it works…
When font subsetting is enabled, NitroPack creates a subset version of the original font file by removing all unused glyphs. By default, it optimizes both text and icon fonts, but you can also change this behavior.
NitroPack automatically identifies the specific glyphs (icons) used on a page and removes the redundant ones.
Depending on the number of glyphs removed, it can reduce a font's size drastically and, in some cases, inline it in the HTML markup, making it available to the browser sooner.
Before NitroPack applies font subsetting
After NitroPack applied font subsetting
Having this optimized process of font execution leads to other benefits as well:
1. No more Flash of Unstyled Text (FOUT)
Flash of unstyled text means that a browser uses the fallback system font (unstyled) initially and then upgrades to the web font when it downloads. The main reason for this to happen is using unoptimized, large font files. As a result, browsers need more time to download and parse them. With the font subsetting feature enabled, your font files are generally much smaller, and the browser can load them almost instantly.
2. Fewer network requests
By inlining the optimized fonts into the HTML markup, the browser doesn't need to make multiple network requests to your server in order to download the files. As a result, the amount of data that needs to be transferred is much smaller, and your font files load immediately.
3. Better user experience and perceived performance
The flash of unstyled text isn't the worst part of visualizing fonts. Based on your site's settings, the browser might apply the flash of invisible text (FOIT) technique, where no text will be visible until the font file isn't downloaded. Both of these practices are good to be avoided if you aim to provide an exceptional user experience on your site. The font subsetting feature prevents this from happening. All your fonts will load seamlessly, improving your UX and perceived performance.
While we are sure of our latest feature's stability and performance, we encourage you to test it thoroughly before enabling it.
For this purpose, you can use NitroPack's Safe mode to try it out without risking UX issues.
Start by going to the Settings panel, enabling the Safe mode, and saving your settings.
When you enable it, you can visit a test version of any page by adding ?testnitro=1 to its URL. While in Safe mode, all changes you make (including turning on Font Subsetting) affect only these test pages.
Then, go to Fonts settings and toggle on the "Font Subsetting (Remove Unused Glyphs)" option:
After enabling it, go to the second drop-down menu and select which fonts categories should be optimized:
*If you want to learn more about the first drop-down menu and how you can utilize it - visit our Help Center.
Make sure you're still in Safe Mode and save your settings after enabling the feature.
After that, open all pages you'd like to test by adding ?testnitro=1 to their URL. Browse around for a few minutes and refresh these pages a couple of times.
When you're done testing, you can enable Font Subsetting on your live website by turning off the Safe mode. Then, purging your cache (you can either do it manually or just click on "Yes, do it") and save your settings.
On the other hand, if you don't want to keep the feature on your website, disable both Font Subsetting and Safe Mode and save your settings.
Got additional questions about the feature? Drop them in the comment section below for our product team to answer :)
Niko has 5+ years of experience turning those “it’s too technical for me” topics into “I can’t believe I get it” content pieces. He specializes in dissecting nuanced topics like Core Web Vitals, web performance metrics, and site speed optimization techniques. When he’s taking a breather from researching his next content piece, you’ll find him deep into the latest performance news.
