[Resolved] Font awesome removal in GP 2.1

[Enrico]

Hi Tom,
I use font awesome and I am going to use the plugin you suggested: “Better Font Awesome”.

It is better to disable first font awesome in GP 2.1 and then use “Better Font Awesome” or is better to just start using “Better Font Awesome”?

After activating “Better Font Awesome”, to avoid garbage in the GP setting there is some cleaning in the setting or in the SQL that could be done?

Thanks a lot
Enrico

[Tom]

It’s important to disable Font Awesome in the theme (doesn’t matter if you do it first or second). It will just prevent GP from loading the files.

There’s nothing database-wise you need to worry about.

Also, a plugin isn’t necessarily necessary. You can add Font Awesome yourself with a function like this: https://docs.generatepress.com/article/font-awesome/#font-awesome-5

[Enrico]

I am using only your code so I have font awesome 5.

Thank a lot Tom!

[Tom]

Perfect! You’re welcome 🙂

[Enrico]

There is something strange, this function:

add_action( 'wp_head', 'tu_font_awesome_css' );
function tu_font_awesome_css() {
    echo '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">';
}

creates four new requests to use.fontawesome.com and for what I see it adds more CSS and fonts then in the old GP version or in the new with the original font awesome setting.
https://use.fontawesome.com/releases/v5.0.9/css/all.css
https://use.fontawesome.com/releases/v5.0.9/webfonts/fa-solid-900.woff2
https://use.fontawesome.com/releases/v5.0.9/webfonts/fa-brands-400.woff2
https://use.fontawesome.com/releases/v5.0.9/webfonts/fa-regular-400.woff2

Do you think it is possible to make it work only with the css for font awesome 5 without any request for Css or code to convert font awesome 4 to 5?

If this is not possible it could be for other reason that this 4 request are not all necessary or not well optimized?

I don’t think that font awesome 5 should be worst then font awesome 4.

[Tom]

all.css is supposed to have all of those files combined. Perhaps you have a plugin adding the other files?

[Enrico]

Hi Tom,
all the files from use.fontawesome.com (total size 119kb) are loaded only if I use that function. I also disabled two plugin that could have something to do with CSS aggregation or font loading. I use font awesome in the menu, before post content and after post content.

But the same site with GP setting for font awesome version 4 was loading only one file /wp-content/themes/generatepress/fonts/fontawesome-webfont.woff2

In an other site that don’t use business font awesome icons (Facebook, Twitter, Linkedin), the file fa-brands-400.woff2 is not loaded. So it loads only the 3 files it need.

It could be that the CDN is new and not well optimized.

Or it could be that it must be used some more parameters in the function used to call the CDN.

I don’t know, they are working it was only faster with only one request.

[Tom]

Very weird. You can grab your own CDN URL on their website: https://fontawesome.com/get-started

Perhaps that might fix it?

Also, be sure to turn the GP Font Awesome library off if you have it turned on (Customize > General).

[Enrico]

Thank a lot for the link.

Yes, I have disable GP awesome setting. I have also upgraded the version 5.0.12 but it is all the same, it is only larger (4 request, total size 127kb)

Their recommend way to use font awesome 5 it is “SVG with JavaScript” https://fontawesome.com/how-to-use/svg-with-js

Apparently the way we used font awesome it is still the easy way but not anymore the best way with version 5.

So I tried to simply use this different code inside your function:
<script defer src="https://use.fontawesome.com/releases/v5.0.12/js/all.js" integrity="sha384-Voup2lBiiyZYkRto2XWqbzxHXwzcm4A5RfdfG6466bu5LqjwwrjXCMBQBLMWh7qR" crossorigin="anonymous"></script>

It also work and it request only one file to use.fontawesome.com , but adds a lot of script, so the size increased by 84kb. In this way font awesome “cost” 84 kb + 127 kb = 211 kb
Since in this way there are 2 less requests (it add an additional request to fonts.gstatic.com) the speed is similar.

The best way should be to use “SVG with JavaScript” inside the site, not only in the function, but for the moment I don’t want to spend a lot of time dealing with “SVG with JavaScript”.

So the question for the moment is: it is better 84kb less or 2 requests less? For the moment it is a bit faster the original function without “SVG with JavaScript”.

[Tom]

I would say less size is more important than fewer requests, especially if you have HTTP/2 enabled on your server.

You can always build your own icon font using a tool like IcoMoon – that way you can choose the icons you need and ditch the rest.

[Enrico]

Thanks a lot for the suggestions!

[Tom]

No problem 🙂

[Author]

Posts