Font Subsetting (Remove Unused Glyphs)

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_subset.png

Before NitroPack applies font subsetting


after_subset.png

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 Safe mode can help you try out Font Subsetting without risking UX issues.

Go to the Settings panel, enable the Safe mode, and save your settings:

enable_safe_mode.png

When Safe Mode is enabled, 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.

Your_Website_Example2.png

Then, go to Fonts settings and toggle on the "Font Subsetting (Remove Unused Glyphs)" option:

enable_font_subsetting.png

From the second drop-down menu, select which font categories should be optimized:

font_subsetting_settings.png

Save your settings.

save_settings.png

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 Safe mode and purging your cache (you can either do it manually or just click on "Yes, do it").

automatic_purge.png

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.


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 from the first drop-down menu, select "Enabled":

font_fallback_enabled.png

When you enable it, dynamically added elements will gracefully 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:

manually_include_glyphs.png

If it's an icon, you can either copy (ctrl/cmd+c) it from a font library and paste (ctrl/cmd+v) it:

manually_add_glyph.gif

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:

inspect.png


Click on the small arrow to expand the <a> element:

expand_attribute.png

Then, click on the ::after element:

click_after.png

 

On the right side, you'll see "content", copy the code between the quotation marks (i.e., \f107):

copy_glyph.png

*In some cases, there might be an empty square instead of code. Again, you should copy the empty square between the quotation marks:

inspect_font_square.png

And paste it:

paste_glyph.png

If it's a text character, simply type the character in the field.

Then, purge your cache to apply the changes.

Refresh your website, and see if the icon is visualizing correctly.

If you're still experiencing issues, contact us, and we will assist you.

 

 

Was this article helpful?
2 out of 2 found this helpful

Comments

0 comments

Article is closed for comments.