NitroPack's font subsetting feature automatically creates a subset version of the original font file by removing all unused glyphs (in many cases, it is hundreds or even thousands of them).
Depending on the number of glyphs removed, it can reduce their size drastically, making them much faster to load by the browser.
Before NitroPack applies font subsetting
After NitroPack applied font subsetting
In some cases, if certain size conditions are met, NitroPack can even inline the fonts in the HTML markup.
As a result of all that:
Browsers will load your fonts almost immediately as they will be of a much smaller size.
By inlining the optimized fonts into the HTML markup, browsers don't need to make multiple network requests to download your font files.
All your fonts will load seamlessly, improving your UX and perceived performance.
And here's how you can enable it on your site…
How to Get Started with The Font Subsetting Feature
First and foremost - test.
NitroPack's Test mode can help you try out Font Subsetting without risking UX issues.
Go to the Settings panel, enable the Test mode, and save your settings:
When Test Mode is enabled, you can visit a test version of any page by adding ?testnitro=1 to its URL. While in Test 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" option:
From the drop-down menu, select which font categories should be optimized:
Save your settings.
After that, NitroPack will automatically optimize your pages and remove the unused glyphs from your selected type of fonts.
When you're done testing, you can enable Font Subsetting on your live website by turning off the Test mode and purging your cache (you can either do it manually or just click on "Yes, do it").
Save your settings again.
On the other hand, if you don't want to keep the feature on your website, disable both Font Subsetting and Test Mode and save your settings.
What If a Certain Icon is Missing After Enabling Font Subsetting
If your website utilizes dynamic elements (JavaScript), you might notice some missing icons (glyphs) after enabling font subsetting.
In such cases, you have two options:
1. Go to Font Subsetting, and enable the font fallback option:
When you enable it, dynamically added elements will fall back to the original font file if they use a glyph that is not part of the optimized subset.
Then, you should save the settings and purge your site's cache.
2. Manually specifying the missing glyphs
In case the missing glyphs are a fixed set, you can also manually add them by pasting them in the field:
If it's an icon, you can either copy (ctrl/cmd+c) it from a font library and paste (ctrl/cmd+v) it:
Or get into your site's code and copy the icon's code value.
Here's how to do it (using our website as an example):
Start by right-clicking on the specific icon and opening Inspect:
Click on the small arrow to expand the <a> element:
Then, click on the ::after element:
On the right side, you'll see "content", copy the code between the quotation marks (i.e., \f107):
*In some cases, there might be an empty square instead of code. Again, you should copy the empty square between the quotation marks:
And paste it:
If it's a text character, simply type the character in the field.
Then, save your settings and purge your cache to apply the changes.
Refresh your website, and see if the icon is visualizing correctly.
If you're still experiencing issues, you can contact our Support team using the chat bubble on the bottom right of this page.