Loading Weight of Font Awesome in Joomla 5

[Londinium]

Hi everyone,

I've just noticed that the following file is the third most loaded (in weight) file in my website's Cloudflare CDN:

Code: Select all

media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2

Apparently, it is loaded via this file:

Code: Select all

media/system/css/joomla-fontawesome.min.css" rel="stylesheet">

How can I disable it? I am in Joomla 5.2, using a custom-coded template that doesn't require these super heavy fonts.

However, this font, which is 157 KB, is loaded unnecessarily every time a page is loaded.

Mysteriously, the call to load the font is not in the custom-coded template's index-php.

Could it be loaded via Cassiopeia?

Joomla should have the option to turn it off.

I appreciate your comments.

Thank you,

Luke

[Per Yngve Berg]

https://docs.joomla.org/J4.x:Web_Assets

[ceford]

Have a look in the System - Debug plugin. There is a Refresh Assets option which should be No on a production site.

[Londinium]

Have a look in the System - Debug plugin. There is a Refresh Assets option which should be No on a production site.

Thank you for your reply.

Excuse my ignorance, but what does this plugin have to do with the loading of Font Awesome?

And by turning it off, am I also turning off other relevant assets?

Thank you in advance,

Luke

[ceford]

If you Toggle Inline Help you see this explanation:

If enabled will, on each page reload, add a different hash to every script/stylesheet file with auto version so that they never use the browser cache.

Was your setting Yes or No? It will not affect any normal site operations.

[Londinium]

If you Toggle Inline Help you see this explanation:

If enabled will, on each page reload, add a different hash to every script/stylesheet file with auto version so that they never use the browser cache.

Was your setting Yes or No? It will not affect any normal site operations.

It was on. I turned it off but didn't notice any difference in the loaded code of a webpage.

I cleaned the cache and the file renewed the post .css hash values:
media/system/css/joomla-fontawesome.min.css?8485b2

[SharkyKZ]

Said file is not loaded by any Joomla core code, except the default template. Maybe it's included in your template?

[ceford]

Said file is not loaded by any Joomla core code, except the default template. Maybe it's included in your template?

It is mentioned in style sheets but I don't know exactly how that works:

Code: Select all

@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../../../media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2?v=237f4a") format("woff2"), url("../../../media/vendor/fontawesome-free/webfonts/fa-solid-900.ttf?v=adec7d") format("truetype");
}

[SharkyKZ]

I meant the stylesheet (media/system/css/joomla-fontawesome.min.css). It is specific to Cassiopeia template. Other templates would normally be using media/vendor/fontawesome-free/css/fontawesome.min.css to load FontAwesome.

[Londinium]

I meant the stylesheet (media/system/css/joomla-fontawesome.min.css). It is specific to Cassiopeia template. Other templates would normally be using media/vendor/fontawesome-free/css/fontawesome.min.css to load FontAwesome.

It is specific to Cassiopeia but my custom template is based on Cassiopeia.
The question is: where is the root of the call to load this heavy font?
Because there are several mentions to it. In the stylesheet, in the webassets, and in a json file.

[Per Yngve Berg]

It's not specific to Cassiopeia. Then it would have been located in the Cassiopeia folder.

It may be a component loading it.

[SharkyKZ]

It is specific to Cassiopeia but my custom template is based on Cassiopeia.
The question is: where is the root of the call to load this heavy font?
Because there are several mentions to it. In the stylesheet, in the webassets, and in a json file.

In Cassiopeia it's a dependency of main template file, declared in joomla.asset.json file:

Code: Select all

    {
      "name": "template.cassiopeia.ltr",
      "description": "The css file to be used when the site is left to right (LTR).",
      "type": "style",
      "uri": "template.min.css",
      "dependencies": [
        "fontawesome"
      ]
    }

You can remove it. Note that some extensions may still load it. For example, Debug plugin.