User tests: Successful: Unsuccessful:

avatar Fedik
8 Nov 2020

Pull Request for Issue #30793 .

Summary of Changes

This loads fontawesome.css with font-face

Testing Instructions

run npm install and please look #30793 for detail

Actual result BEFORE applying this Pull Request

font-face not loaded

Expected result AFTER applying this Pull Request

font-face loaded

Documentation Changes Required


avatar Fedik Fedik - open - 8 Nov 2020
avatar Fedik Fedik - change - 8 Nov 2020
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 8 Nov 2020
Category Repository
avatar richard67
richard67 - comment - 8 Nov 2020

@ced1870 Please test. Thanks in advance.

avatar dgrammatiko
dgrammatiko - comment - 8 Nov 2020

Loading all the fonts by default results to 3 fonts that need to be fetched with a size (at least) over 164kb +(59kb for the css file). The problem is that this css is a render-blocking asset, meaning nothing is painted in the screen before the css and all the dependencies are fetched, parsed and evaluated. In sort say bye-bye to any meaningful lighthouse scores destroying any SEO, UX and eventually, the ROI of anything build with Joomla...
There are 2 ways out of this:

  • Move to svg for any rendered icon, which is what everybody is doing anyways
  • Lazily load the fonts (has caveats, eg icons will popup out of nowhere after the page has already has been painted)

Screenshot 2020-11-08 at 13 18 54

Screenshot 2020-11-08 at 13 19 56

avatar Fedik
Fedik - comment - 8 Nov 2020

A modern browsers will load the font file only when it really used.
The PR fine as it is.

avatar dgrammatiko
dgrammatiko - comment - 8 Nov 2020

A modern browsers will load the font file only when it really used.

True, but the css is still render-blocking so bye-bye meaningful performance. I mean the PR is fine but font awesome just destroys performance and this has nothing to do with the PR rather the higher-order decision to stick with the outdated practice of using fonts for the icons.

Anyways my comment was more to indicate that Joomla is drifting away from being a viable and competitive solution due to the enforced Bootstrap, Jquery and Font Awesome. People will, eventually, figure this out the hard way, sooner or later...

avatar ced1870
ced1870 - comment - 9 Nov 2020

Hi, sorry but I don't understand in which file I shall make the changes ...

avatar Fedik
Fedik - comment - 9 Nov 2020

you have to run npm install
or download "prebuild" attached at end of this page:

avatar ced1870
ced1870 - comment - 12 Nov 2020

I have downloaded this version and wanted to check the icons in the article using my own template. But, there is no Fontawesome icons in this version ! it still uses the Icomoon !
how am I supposed to test that ?

avatar Fedik
Fedik - comment - 12 Nov 2020

how you did it in #30793? that how you should test

avatar drmenzelit
drmenzelit - comment - 28 Feb 2021

I tried to test this PR: applied the patch, run npm, removed the fontawesome.min.css file from Cassiopeia. I see now that the media/vendor/fontawesome-free/css/fontawesome.min.css is being loaded. The file loads the font-face, but the font is not there, I think the path to the webfonts is not correct, e.g. url(../webfonts/fa-solid-900.woff2) format("woff2"). And the definitions of the Joomla icons (e.g. ) are missing.

avatar Fedik
Fedik - comment - 28 Feb 2021

that correct, it a fix for default fontawesome build, for whom want to use it (in own template), it does not include joomla icons 😉

if you try to use some fa-blabla icon you will get it loaded:

Add a Comment

Login with GitHub to post a comment