Spinneret Blog | Host a Smaller Font Awesome File

Blog

Host a Smaller Font Awesome File

By Michael Stepanian

Usually when using a CSS/JS package like Font Awesome, the easiest thing to do is use the CDN. This way, you don't have to host anything, and since a lot of sites are using the same CDN, visitors on your site will have the file cached, making load times quicker.

However, there is a catch to using Font Awesome's CDN. If you do not have Font Awesome Pro, you only get access to 10,000 page views a month when using the CDN. For those of us who don't want or don't need to pay for Font Awesome Pro, but still have more users than Font Awesome's imposed limit, we have to host Font Awesome ourselves.

Something that might be concerning is that the Font Awesome all.js file that is required to use all 3 free font types (solid, brands, and regular), is a huge file, coming in at 1.1 MB. The reason for the hugeness is that each SVG is hardcoded into this file. But this also means that if you are not using every single one of Font Awesome's 1500+ icons, you can make this file smaller by removing the icons that are not being used.

Here at Spinneret, we created a script to do this for our web applications, but it is so useful that we decided to make it available online for free. Before using this online tool, determine which Font Awesome icons you are using in your web application. Simply select each one of these icons and hit the download button, and your modified all.js file will be downloaded!

Click here to get started!