WordPress themes often come with two icon fonts employed. Genericons is an open-source icon font to replace image icons. Genericons fonts have a page weight of 25k to 100k page weight (average 75k). Why different weights? We’re not sure. But we know it happens. We’ve tested it.
The other font is Dashicons (67k page weight). WordPress uses Dashicon in the WordPress administration control panel. But themes can access the invisible and unused font.
WordPress baked Genericons into four themes: Twenty-twelve, Twenty-thirteen, Twenty-fourteen, and Twenty-fifteen. Many other theme developers are in love with the font. We have a low opinion of the icons because it requires hacking to remove. They are dead weight. Just because you can do something “excellent” doesn’t mean you should.
Many designers who care about load time wish they could disable these icon fonts. It’s possible to do – but requires “unorthodox code exorcisms” via FTP. Risky business. We’ve messed with it and it’s not fun. We wish there was a plugin for disabling font icons.
The problem is, when calling even one single icon symbol from your theme, WordPress loads the entire icon set. In our testing of themes, we’ve seen 30 percent of Genericon loads produce 404 errors. The server can’t find the requested icon font. That’s a big fail because 404 errors cause page-load delays. They can be worse than loading the heavy font itself.
It’s possible to subset icon fonts to accelerate load times. Sub-setting creates a font that only contains the characters you use. This can reduce icon page weight. Fontello Font icon generator is an example of online automated icon sub setting. Genericons and Dashicons are not in the collection – yet.
These are the freeware icon sets available on Fontello:
- Font Awesome
- Modern Pictograms
- MFG Labs
- Web Symbols
If your WordPress theme carries an icon speed burden, perhaps you should give in and leverage it as a graphic asset as best you can. You can adjust the size of the icons via css or, when using a shortcode, the size attribute. Default size is 16px.
To make this functionality happen on post, pages, and widgets, just use free Genericon’d plugin. It enables easy use of the Genericons icon font set from within WordPress. You can insert icons using either HTML or a shortcode. But remember 25k is equal to 12 to 25 two-color, 8-bit PNG images. Is it worth slowing down every page on the site with font drag when you could have just one page bear the burden of a PNG image? One tiny 16 x 16 pixel Twitter bird icon font symbol can add 39k weight to all site pages!
Of 167 free WordPress themes we examined,
25 Genericons 25k, 7@ 404 errors
25 Font Awesome 77k, 2@ 404 errors
7 Dashicons 67k
2 Glyphicons 33k
2 themes used both Genericons and Dashicons. This is overkill.
G.F. icons 16.9k
TOTAL 64 of our theme sample used icons (almost 40 percent). It’s an official bloating trend!