joomla-cms
joomla-cms copied to clipboard
joomla
[4.0] fix: fontawesome with font-face
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
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)
A modern browsers will load the font file only when it really used. The PR fine as it is.
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...
Hi, sorry but I don't understand in which file I shall make the changes ...
you have to run npm install
or download "prebuild" attached at end of this page:
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 ?
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.
that correct, it a fix for default fontawesome build, for whom want to use it (in own template), it does not include joomla icons :wink:
if you try to use some fa-blabla icon you will get it loaded:
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.
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.
This pull requests has been automatically converted to the PSR-12 coding standard.
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.