Font Superior is an extremely well-liked icon library. Sadly, it’s considerably simple to make use of in a method that ends in less-than-ideal efficiency. By subsetting Font Superior, we will take away any unused glyphs from the font information it supplies. This can scale back the variety of bytes transmitted over the wire, and enhance efficiency.
Let’s subset fonts collectively in a Font Superior mission to see the distinction it makes. As we go, I’ll assume you’re importing the CSS file Font Superior supplies, and utilizing its net fonts to show icons.
Let’s set issues up
For the sake of demonstration, I’ve nothing however an HTML file that imports Font Superior’s base CSS file. To get an affordable pattern of icons, I’ve listed out each that I take advantage of on one among my facet initiatives.
Right here’s what our HTML file seems like within the browser earlier than subsetting fonts:
Right here’s a take a look at DevTool’s Community tab to see what’s coming down.
Now let’s see what number of bytes our font information take to render all that.
Right here’s our base case
We wish to see what probably the most easy, least performant use of Font Superior seems like. In different phrases, we would like the slowest doable implementation with no optimization. I’m importing the all.min.css file Font Superior supplies.
As we noticed above, the gzipped file weighs in at 33.4KB, which isn’t dangerous in any respect. Sadly, once we peek into DevTool’s Font tab, issues get somewhat worse.
Yikes. 757KB only for font information. For 54 icons.
Whereas font information will not be as costly a useful resource to your browser to deal with as JavaScript, these are nonetheless bytes your browser wants to tug down, only for some little icons. Think about that a few of your customers may be searching your web site on cell, away from a robust or quick web connection.
First try utilizing PurifyCSS
Font Superior’s fundamental stylesheet accommodates definitions for actually hundreds of icons. However what if we solely want just a few dozen at most? Certainly we might trim out the unneeded stuff?
There are various instruments on the market that can analyze your code, and take away unused types from a stylesheet. I occur to be utilizing PurifyCSS. Whereas this library isn’t actively maintained anymore, the concept is identical, and ultimately, this isn’t the answer we’re on the lookout for. However let’s see what occurs once we trim our CSS right down to solely what’s wanted, which we will do with this script:
const purify = require(“purify-css”);
const content material = [“./dist/**/*.js”]; // Vite-built content material
purify(content material, [“./css/fontawesome/css/all.css”], {
minify: true,
output: “./css/fontawesome/css/font-awesome-minimal-build.css”
});
And once we load that newly constructed CSS file, our CSS bytes over the wire drop fairly a bit, from 33KB to simply 7.1KB!
However sadly, our different Font Superior font information are unchanged.
What occurred? PurifyCSS did its job. It certainly eliminated the CSS guidelines for all of the unused icons. Sadly, it wasn’t able to reaching into the precise font information to trim down the glyphs, along with the CSS guidelines.
If solely there was a software like PurifyCSS that handles font information…
Subsetters to the rescue!
There are, after all, instruments which might be able to eradicating unused content material from font information, and so they’re referred to as subsetters. A subsetter analyzes your webpage, seems at your font information, and trims out the unused characters. There are a bunch of instruments for subsetting fonts on the market, like Zach Leatherman’s Glyphhanger. Because it seems, subsetting Font Superior is fairly easy as a result of it ships its personal built-in subsetters. Let’s have a look.
Subsetting fonts mechanically
The auto subsetting and guide subsetting instruments I’m about to point out you require a paid Font Superior Professional subscription.
Font Superior means that you can arrange what it calls kits, that are described within the Font Superior docs as a “knapsack that carries all of the icons and awesomeness you want in a neat little light-weight bundle you may sling on the again of your mission with ease.” So, moderately than importing any and each CSS file, a package provides you a single script tag you may add to your HTML file’s <head>, and from there, the package solely sends down the font glyphs you really need from the font file.
Making a package takes a few minute. You’re handed script tag that appears one thing like this:
<script src=”https://package.fontawesome.com/xyzabc.js” crossorigin=”nameless”></script>
When the script masses, we now haven’t any CSS information in any respect, and the JavaScript file is a mere 4KB. Let’s look once more on the DevTools Fonts tab to see which font information are loaded now that we’ve accomplished some subsetting.
We’ve gone from 757KB right down to 331KB. That’s a greater than 50% discount. However we will nonetheless do higher than that, particularly if all we’re rendering is 54 icons. That’s the place Font Superior’s guide font subsetter comes into play.
Subsetting fonts manually
Wouldn’t or not it’s good if Font Superior gave us a software to actually choose the precise icons we needed, after which present a customized construct for that? Nicely, they do. They don’t promote this too loudly for some cause, however they really have a desktop utility precisely for subsetting fonts manually. The app is out there to obtain from their web site — however, like the automated subsetter, this app requires a paid Font Superior subscription to truly use.
Search the icons, select the household, add what you need, after which click on the massive blue Construct button. That’s actually all it takes to generate a customized subset of Font Superior icons.
When you hit the button, Font Superior will ask the place it ought to save your customized construct, then it dumps a ZIP file that accommodates every part you want. Actually, the construction you’ll get is strictly the identical as the conventional Font Superior obtain, which makes issues particularly easy. And naturally, it helps you to save the customized construct as a mission file so you may open it again up later so as to add or take away icons as wanted.
We’ll open up DevTools to see the ultimate dimension of the icons we’re loading, however first, let’s take a look at the precise font information themselves. The customized construct creates many differing types, relying on what your browser makes use of. Let’s concentrate on the .woff2 information, which is what Chrome masses. The identical gentle, common, duotone, strong, and model information that have been there earlier than are nonetheless in place, besides this time no file is bigger than 5KB… and that’s earlier than they’re gzipped!
And what concerning the CSS file? It slims down to simply 8KB. With gzip, it’s solely 2KB!
Right here’s the ultimate tally in DevTools:
Earlier than we go, take a fast peek at these font filenames. The fa-light-300.woff2 font file continues to be there, however the others look completely different. That’s as a result of I’m utilizing Vite right here, and it determined to mechanically inline the font information into the CSS, since they’re so tiny.
That’s why our CSS file seems somewhat larger within the DevTools Community tab than the 2KB we noticed earlier than on disk. The tradeoff is that almost all of these font “information” from above aren’t information in any respect, however moderately Base64-encoded strings embedded proper on this CSS file, saving us extra community requests.
All that stated, Vite is inlining many various font codecs that the browser won’t ever use. However general it’s a reasonably small variety of bytes, particularly in comparison with what we have been seeing earlier than.
Earlier than leaving, in case you’re questioning whether or not that desktop font subsetting GUI software is available in a CLI that may combine with CI/CD to generate these information at construct time, the reply is… not but. I emailed the Font Superior people, and so they stated one thing is deliberate. That’ll permit customers to streamline their construct course of if and when it ships.
As you’ve seen, utilizing one thing like Font Superior for icons is tremendous cool. However the default utilization won’t at all times be one of the best strategy to your mission. To get the smallest file dimension doable, subsetting fonts is one thing we will do to trim what we don’t want, and solely serve what we do. That’s the sort of efficiency we would like, particularly with regards to loading fonts, which have historically been robust to wrangle.
Subsetting Font Superior to Enhance Efficiency initially revealed on CSS-Methods. You need to get the publication.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!