I'm currently using two FontAwesome icon packs (plus the FontAwesome base) on my site, installed via NPM and loaded via Sass:
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';
Each pack loads no less than 5 different files: one for every single font format. This means that for the handful it actually uses, my site is compiling and loading thousands of icons across 10 different files, resulting in a final build of almost 3MB in font files alone:
In 2021, I can't see why the average site that doesn't serve a large proportion of users on ancient browsers must be forced to use ancient font formats like EOT, TTF and even WOFF, and I'm clearly not the only one that thinks so.
According to CanIUse.com WOFF2 has been fully supported by Safari since 2018, Edge since 2016, Firefox since 2015, and Chrome and Opera since 2014. It therefore seems like a reasonable idea to allow loading FontAwesome's webfonts in SVG and fall back to WOFF2, which would cut 5 files per font pack down to just 2. At the very least, it should be possible to get rid of the absolutely ancient EOT, which no modern browser has supported for years.
However, nothing in FontAwesome's documentation indicates that this is possible, let alone shows how to do it. Deleting everything but SVG and WOFF2 inside of \node_modules\@fortawesome\fontawesome-free\webfonts and running npm run dev results in a fatal build error, and modifying each pack's @font-face declaration in \node_modules\@fortawesome\fontawesome-free\css doesn't work either.
Is this possible to do, and if so, how?
