Font Awesome File Size

Hi! I’m in the process of optimizing the load time on my site and have noticed that Font Awesome is taking up 385kb on load. It’s loading light, regular, solid, and brands files.

This is more than 1/3 the size of my home page. Can you advise how I can reduce this file size?

Hi Justin,

Thank you for writing in, you can install a caching plugin to improve the performance of your site.

You can follow some of our performance guide provided here.

Hope it helps,
Cheers!

Caching has been long enabled, that’s part of the solution but definitely not the answer. Here are a few thoughts:

  • It would be ideal to only load icons (or at least only the files) that a page is using.
  • I could use the Cloudflare CDN to load the icons instead of my own webserver via CDNJS, but I’d need to know how to change this in X (reference: https://cdnjs.com/libraries/font-awesome)
  • I could switch to using my own font that includes only the icons the site uses, but this is manual, not considerate of any future icons I’d want to use, and seems like a lot of work (www.fontello.com for anyone pursuing this option).

Any other ideas? 385kb is very substantial.

Hi,

Regretfully, Fontawesome is part of the core X and Pro Theme and is tightly integrated. It’s not recommended to fiddle with the core functions of the theme like font awesome. For more details, please take a look at following thread:

https://theme.co/apex/forum/t/disable-font-awesome-request/28765/4

Thanks

For those who are curious, here’s how I’m solving this -

I’m editing the Font Awesome font files to only have the icons I want. This doesn’t mess with the core and while I will have a smaller list of icons available in X, I’ll also have a smaller file size.

Font Awesome files are stored on the server here: /wp-content/themes/pro/framework/fonts/font_awesome.

Tools:

  • FontForge is a free font editor. Use it to edit the SVG files and save.

  • Upload your smaller SGV file to transfonter to quickly convert it to all the different font types. Upload to your server and you’re done.

Hi @justinmking,

Thanks for sharing, but editing the actual SVG file could change icon codes that are bound to theme styling. It will appear differently or not appear at all. Still, you can do that but we don’t recommend it.

Thanks!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.