Title: Unused CSS?
Last modified: June 11, 2019
---
# Unused CSS?
* Resolved [twgerber](https://wordpress.org/support/users/twgerber/)
* (@twgerber)
* [6 years, 11 months ago](https://wordpress.org/support/topic/unused-css-4/)
* I am using Google Pagespeed and it shows that 99.2% of the Font Awesome CSS is
unused.
* Is there a config change I can make to eliminate/minimize the unused CSS?
* I do use paid WP Rocket for optimization and I have Minify and Optimize checked.
* Some of the unused CSS is pasted below from Dev Tools -> Coverage.
/*! * Font
Awesome Free 5.8.1 by [@fontawesome](https://wordpress.org/support/users/fontawesome/)–
[https://fontawesome.com](https://fontawesome.com) * License – [https://fontawesome.com/license/free](https://fontawesome.com/license/free)(
Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) */
* .fa-lg {
font-size: 1.33333em; line-height: .75em; vertical-align: -.0667em }
* .fa-xs {
font-size: .75em }
* .fa-sm {
font-size: .875em }
* .fa-1x {
font-size: 1em }
* .fa-2x {
font-size: 2em }
* .fa-3x {
font-size: 3em }
Viewing 4 replies - 1 through 4 (of 4 total)
* Plugin Author [mlwilkerson](https://wordpress.org/support/users/mlwilkerson/)
* (@mlwilkerson)
* [6 years, 11 months ago](https://wordpress.org/support/topic/unused-css-4/#post-11627108)
* All true. In fact, there’s even more inefficiency if you look at the web font
files that this CSS causes to be loaded in.
* As a developer myself, it would bother me to be that inefficient. However, our
usage statistics show that the vast majority of the time, people just reach for`
all.css` when installing Font Awesome 5. Probably because it’s _easy_.
* So the initial release of this WordPress plugin is focused on the _easy_ scenario
that is already what the vast majority of users seem to care most about.
* However, if efficiency is more important to you (as it would be to me), then
you can definitely tune how Font Awesome is loaded and get it to be _much_ more
efficient.
* For example, you could use our [SVG with JavaScript framework, which leverages tree shaking](https://fontawesome.com/how-to-use/on-the-web/advanced/svg-javascript-core)
to eliminate from the bundled assets all but the icons actually used. In fact,
the front end of this plugin’s admin UI is a React app that uses our [`react-fontawesome`](https://fontawesome.com/how-to-use/on-the-web/using-with/react)
component to do just that.
* If you want to stick with our Webfont with CSS technology instead, then you could
consider–instead of using this plugin–add your own code (to your `functions.php`
for example) to enqueue just the Solid style or just the Light style instead
of `all.css`, if you use only icons from one style. That would dramatically reduce
the amount of unused CSS and webfont files that are loaded, but it wouldn’t be
as precise a subset as the tree-shaken JS approach.
* If you want to be more precise with subsetting and Webfont with CSS, then you
should check out our recently released Kits in Font Awesome Pro. You’d need to
enqueue your own kit script (again, probably from your `functions.php`), instead
of using this plugin. And you’d therefore also have to handle any loading conflicts
on your own. But what you get is _auto_ subsetting, where your site will load
much more focused chunks of webfont files that correspond to the icons your site
actually uses. And again, if you use the JS/SVG version of Pro Kits, it’s an
even more precise subset (down to each and every icon, loaded only if and when
your site uses them).
* (You can also get kits in the new Font Awesome Free, but they do have this auto-
subsetting feature.)
* Thread Starter [twgerber](https://wordpress.org/support/users/twgerber/)
* (@twgerber)
* [6 years, 11 months ago](https://wordpress.org/support/topic/unused-css-4/#post-11627345)
* This is a new area for me so not completely following.
* Questions
* 1) for the free plugin should I change method from webfont to svg for an improvement?
2) Change v4 compatibility to something else from required?
* Or are you saying purchase Pro?
* Plugin Author [mlwilkerson](https://wordpress.org/support/users/mlwilkerson/)
* (@mlwilkerson)
* [6 years, 11 months ago](https://wordpress.org/support/topic/unused-css-4/#post-11627523)
* Whoops, sorry. I made some invalid assumptions. Let me back up and provide a
little more context.
* There are lots of different ways to set up and use Font Awesome. Not just in
WordPress, but in all kinds of environments (desktop, mobile, web). Each approach
has various advantages and disadvantages.
* One way to setup Font Awesome on the web is to use our Free or Pro CDN and simply
load everything. We have two different technologies for delivering icons: Webfont
with CSS, and SVG with JavaScript.
* So, loading from our Free or Pro CDN amounts to adding a `` tag to the `
` of your page template, if you want to use the Webfont with CSS technology,
or a `