On almost any modern website you find icons. They are often used on links to social media profiles. Many WordPress themes come bundled with such a web font for icons. Nowadays I usually always use SVG symbols instead of icon web fonts when building a theme from scratch. But when customizing a theme, you might have to still use them.
Load web fonts locally
Many website owners embed fonts locally due to the GDPR. For this purpose they download the web font and put it into their child theme. Tha’s a perfect time to think about which icons you really need and which not. Icon fonts for social media profiles are a good example on why you might want to customize the font you are including.
Customize a icon web font
Let’s take the popular Font Awesome as an example. It contains 1544 icons with 433 icons for brand such as social media. But do you really have a profile on all of them? If not, it might be worth to only load those icons you really need. With an SVG sprite, that would be as easy as removing al unnecessary symbols from the file, but with web fonts it’s a bit harder.
Online service for font customization
For a friends website I had to add some social media icons the web font bundled with the theme was not providing. So I had to use Font Awesome instead. While searching for a way to use just as few icons as possible I’ve found site Fontello, which offers a variety of icon font. One of them was Font Awesome.
On that website you can simply use the two searches to search for font names and icon names. Then you multi-select all the icons you need. Maybe add some you might need in the near future as well.
On another tab you can even customize the names of the icons in the resulting files and the unicode values. Then simply download your selection, which will contain the web font in different formats as well as some CSS files with the necessary definitions.
Saving a lot of bandwidth
But how much can you safe? Font Awesome uses 3 files for different icon types with 5 formats each. The woff2 files add up to around 165kB. The minified CSS file adds another 57kB.
For that friends website, I only needed 9 icons and woff2 file less then 4kB with another 2kB CSS (unminified), which can be reduced to 1kB (minifed).
In total 2 files/requests and almost 98% in bandwidth (217kB) could be saved.
Do optimize your fonts!
As you can seen, there is a huge potential to safe bandwidth and make your site load faster. The only issue you have to deal with is updating that reduced font, once you need a new icon.
When using Google Fonts, you can use the text parameter to define the characters you need. Unfortunately on Google Fonts you don’t find icon web fonts and I have not found an online service offering a similar functionality. If you know of such a website, please leave a comment below.