? ? Pending

User tests: Successful: Unsuccessful:

avatar Fedik
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

none

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:
image

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:
Screenshot_2021-02-28_15-13-57

avatar HLeithner
HLeithner - comment - 16 Dec 2021

for whom want to use it (in own template), it does not include joomla icons 😉

this hit me yesterday, so I'm in favor for merging this.

as @Fedik already said "fonts are only loaded when used", of course if you use them they will be loaded and svg maybe better but it's too late for that.

For the b/c layer in atum and cassopeia I would move the icomoon css to it's own joomla asset so it can be loaded only when needed. (I don't know why cassopeia loads b/c icons but I'm sure there is a reason). for the Backend 3rd party extensions that needs icon could simply include the b/c package with the asset manager.

avatar drmenzelit
drmenzelit - comment - 29 Dec 2021

I don't know why cassopeia loads b/c icons but I'm sure there is a reason

Cassiopeia doesn't load b/c icons, in the Joomla views we still have the old classes "icon-edit", "icon-calendar", etc. What was done, is a conversion / mapping from the classes with Fontawesome content (icons). The file media/system/css/joomla-fontawesome.css contains these mapping and loads the webfonts.
This PR will load Fontawesome / webfonts without the Joomla icons.

avatar chmst chmst - change - 31 Jan 2022
Labels Added: ?
avatar HLeithner
HLeithner - comment - 27 Jun 2022

This pull request has automatically rebased to 4.2-dev.

avatar joomla-bot
joomla-bot - comment - 27 Jun 2022

This pull requests has been automatically converted to the PSR-12 coding standard.

avatar Fedik Fedik - change - 10 Jul 2022
Labels Added: ? ?
Removed: ?
avatar drmenzelit
drmenzelit - comment - 21 Oct 2022

Closing this in favor of using media/system/css/joomla-fontawesome.css in own templates, because that file includes the mapping of Joomla icons to Fontawesome.

avatar drmenzelit drmenzelit - change - 21 Oct 2022
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2022-10-21 11:32:14
Closed_By drmenzelit
avatar drmenzelit drmenzelit - close - 21 Oct 2022

Add a Comment

Login with GitHub to post a comment