Fontawesome 5 error randomly on j5

[trananhmanh89]

Steps to reproduce the issue

I can't tell, because it happens randomly, and it's gone after several refreshes.

Expected result

Fontawesome should show fine.

Actual result

Check the image

System information (as much as possible)

chrome browser
windows 11
cpu intel i5-8400
nvidia card 1050ti
php82
mysql 80
apache 2.4.52

Additional comments

Does anyone have this issue?

[joeforjoomla]

Confirmed. It happens to me too. After clearing the browser cache and reloading the page, everything is back to normal.

[fgsw]

Does anyone have this issue?

Using Joomla5 since 2 month never happened.

System information

PHP Built On Linux lamp302.cloudaccess.net 3.10.0-962.3.2.lve1.5.81.el6h.x86_64 #1 SMP Wed May 31 12:07:35 UTC 2023 x86_64
Database Type mysql
Database Version 8.0.34-cll-lve
Database Collation utf8mb4_general_ci
Database Connection Collation utf8mb4_0900_ai_ci
Database Connection Encryption None
Database Server Supports Connection Encryption Yes
PHP Version 8.1.26
Web Server Apache
WebServer to PHP Interface cgi-fcgi
Joomla! Version Joomla! 5.0.1 Stable [ Kuboresha ] 28-November-2023 16:00 GMT
Joomla Backward Compatibility Plugin Enabled (classes_aliases:"1", es5_assets:"1")
User Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:121.0) Gecko/20100101 Firefox/121.0

[brianteeman]

It happens to me quite often as well. Thought it was just me but obviously not

[richard67]

Does the network tab of the browser's developer tools show something when this happens, or does the browser's error console?

[richard67]

@brianteeman Is it also with the Chrome browser in your case? Or also with other browsers?

[trananhmanh89]

@brianteeman Is it also with the Chrome browser in your case? Or also with other browsers?

My colleagues are using firefox and do not face this issue till j5 update. Thought might because chrome and nvidia graphic card.

[brianteeman]

@brianteeman Is it also with the Chrome browser in your case? Or also with other browsers?

I only use Chrome on Windows

[richard67]

Does it also happen with Joomla 4.4.x? Or only with 5?

[brianteeman]

Does it also happen with Joomla 4.4.x? Or only with 5?

For me just in j5

[joeforjoomla]

It seems just in J5

[joeforjoomla]

UPDATE: it also happens on J4

[ssnobben]

Do you have any conflicting Fontawesome installed before updating?

[chmst]

I cannot replicate - win11 with different browsers but always correct icons. A conflict with former versions could explain the effect

[brianteeman]

Completely clean install just now on localhost of current 5.1git.

No console errors and as soon as you hit refresh it works

[richard67]

Maybe the issue is somehow related to the font-display CSS property? Maybe it has something to do with optimizations with Chrome version 83 for handling "font-display: optional" which are mentioned on this page https://web.dev/articles/preload-optional-fonts?hl=en and more detailed handled here: https://bugs.chromium.org/p/chromium/issues/detail?id=1040632 ?

[richard67]

Unfortunately I can't reproduce it here.

[brianteeman]

I can't reproduce it on demand either. Although lats night I did see it twice on a site that was not one of my own. The link you shared about font-display does sound similar

[Fedik]

I cannot reproduce it,
However I suspect it may also be related to file loading or server response. Because of:

... and as soon as you hit refresh it works

That sounds like the initial load went wrong, and cached version works.

Try disable cache:

• Open Dev Tools Network tab
• Check "Disable cache" checkbox
• Reload the page. Now every reload will be without cache while Dev Tools is opened.

Do you able to reproduce it every time now?
Addittinaly try "Network throttling".

If you able to reproduce then also please look for a response headers for fa-solid-900.woff2 does it font/woff2 or something else?

[brianteeman]

I just observed this on a developers website

When I checked with chrome inspector it did show the woff2 files as loaded
It did NOT show joomla-fontawesome.min.css as loaded
It did not show any errors

[trananhmanh89]

when the icon get error, chrome didn't load any css from joomla

And this is when no icon issue

fact: open new tab with same url, the issue will gone
fact2: i even faced this issue when using a site that behind cloudflare cdn

[brianteeman]

I strongly suspect that this is caused by something related to #32141

// Defer fontawesome for increased performance. Once the page is loaded javascript changes it to a stylesheet.

[richard67]

I strongly suspect that this is caused by something related to #32141

// Defer fontawesome for increased performance. Once the page is loaded javascript changes it to a stylesheet.

@brianteeman Yes, I have the same thing in mind. On my private website I have disabled that lazy loading of the fonteawesome fonts in my child template.

[Fedik]

Nope, that PR affecting only frontend, and the issue about admin side.

[trananhmanh89]

Update: chrome on ubuntu also got this issue.

[dgrammatiko]

It’s either:

• the server (mime types, etc)
• Some plugin doing something stupid
• Wrong CSP configuration

[Fedik]

Another thing I would probably try is to use the preload header for the fonts for admin.
In j4 FA font files size ~160kb
in j5 FA font files size ~260kb

[dgrammatiko]

At the time we were doing those optimizations preload wasn’t supported across the board but now should be done, no questions asked

[brianteeman]

It’s either:

• the server (mime types, etc)
• Some plugin doing something stupid
• Wrong CSP configuration

At least in my case I have observed this with clean joomla installs so that would rule out the plugin or csp and if it works on reload it cant be the mime types

[Fedik]

For reference:

• Weird characters on random refreshes (Ubuntu 14.04, Archlinux, Chrome) FortAwesome/Font-Awesome#10842
• Wrong encoding? sass/libsass#1235
• Strange/Weird characters on refresh (Self-hosted CSS compiled from SCSS) FortAwesome/Font-Awesome#17644

[Fedik]

Please try following, edit Fontawesome css, manualy and place:

@charset "utf-8";

at top of each file .css and .min.css:

media/templates/administrator/atum/css/vendor/fontawesome-free/fontawesome.css
media/templates/administrator/atum/css/vendor/fontawesome-free/fontawesome.min.css

it looks like Browser get confused with content encoding, randomly.

[dgrammatiko]

@Fedik what's unfortunate here is that when we had Postcss, the @charset was always appended...

Basically if it's a lightningcss issue (ie: parcel-bundler/lightningcss#310) someone could enable debug and check if the problem occurs there as well (the non minified css file is not passed through lightningcss iirc)

[brianteeman]

The description in this comment exactly matches my own observations FortAwesome/Font-Awesome#10842 (comment)

[Fedik]

@dgrammatiko it more about sass compiler (or probably both sass and lightning css), this potato removes @charset when detect UTF8, even with charset: true.
Only way I see is to prepend it manualy

[trananhmanh89]

@dgrammatiko it more about sass compiler (or probably both sass and lightning css), this potato removes @charset when detect UTF8, even with charset: true. Only way I see is to prepend it manualy

Hi,
I've compiled font awesome of atum template by using dart-sass, and the result is very different. Could you check?
The left is mine, the right is from joomla atum

[Fedik]

Your with escaped symbols, and joomla with non-escaped.
Techicaly both should work the same, but somehow non-escaped seems not always as good as should.

[dgrammatiko]

Isn’t sass and dart-sass the same package?

[trananhmanh89]

Isn’t sass and dart-sass the same package?

If you use this command to install sass

npm install -g sass

so it's dart-sass.

https://www.npmjs.com/package/sass

[Fedik]

Btw, we use sass-embedded wich is dart-sass, version 1.67

[trananhmanh89]

Btw, we use sass-embedded wich is dart-sass, version 1.67

I noticed that in the package.json file, but I'm not sure why my compiled CSS is significantly different from Joomla's.

[Fedik]

Okay, it clearly sass LightningCSS and browser issue.
Sass (dart-sass) stopped escaping non ASCII symbols, and the Browser may interpret the file with this symbols incorrectly (randomly, due to network or enabled gzip/deflate on server), unlles the file have defined @charset 'utf-8' (which sass also deleting successfully)

Another links:

• Add ASCII output support sass/dart-sass#568 (issue from 2019)
• https://stackoverflow.com/questions/25488037/sass-compile-fontawesome-preserve-notation
• How to retain @ charset or not compile Unicode sass/dart-sass#998
• Lightning CSS doesn't escape content: "\..." parcel-bundler/lightningcss#310

@trananhmanh89 what version of sass did you use?

[trananhmanh89]

@Fedik I'm using Dart Sass 1.71.1 on my windows.

[Fedik]

Sorry, it is not Scss (it works fine, and keep the icons escaped) (I have edited my previous comment)
It is LightningCSS which is transforming escaped UTF8 to raw :)

[dgrammatiko]

Possible fix: #42938

Please test it

[Quy]

I am going to assume this is fixed with #42938. If not, this can be reopened. Thanks for the report.

[trananhmanh89]

I am going to assume this is fixed with #42938. If not, this can be reopened. Thanks for the report.

No, it's not resolved yet. Please do not use raw utf8 for fontawesome. This causes font issue on chrome.

[Fedik]

No, it's not resolved yet.

@trananhmanh89 how did you tested it? (recent changes)
The fix only will be in upcoming 4.4.4 and 5.1 release.

Also, do not trust what browser dev tool shows you, it is not able to render every simbol in dev console.

[trananhmanh89]

@trananhmanh89 how did you tested it? (recent changes) The fix only will be in upcoming 4.4.4 and 5.1 release.

Also, do not trust what browser dev tool shows you, it is not able to render every simbol in dev console.

Hi,
This issue happens randomly, and only on chrome. How can I make sure that this won't happend again?

I thought the solution would be using escaped utf8 string instead of raw utf8 to avoid browser issue...

[Fedik]

I just wanted to be sure whether you tested on dev branch of 5.1-dev or not.

I thought the solution would be using escaped utf8

It one of possible solutions.
Another one is to prepend encoding to the CSS file, that what was done in #42938

So if you able to test on latest 5.1 RC, that would be nice.
https://github.com/joomla/joomla-cms/releases/tag/5.1.0-rc1

[trananhmanh89]

Ok, I asume that adding @charset rule could fix the icon error. But why don't I see @charset rule in file fontawesome.css of atum template?

Checked on package Joomla_5.1.0-rc1-Release_Candidate-Full_Package.zip

[dgrammatiko]

But why don't I see @charset rule in file fontawesome.css of atum template?

Confirmed. Someone needs to check why (caching, something else?) The npm tools code seems to have the required changes...

FWIW J4 is correct:

So maybe the release leader didn't start on a lean branch and didn't run npm install

[bembelimen]

This is an issue of the build script, three persons tested now with a clean and fresh checkout. If we run normal npm install, it's included, if we do a php build/build.php the charset is not included.

So the build script is broken and the mentioned fix did not fix it.

[dgrammatiko]

This can be close since #43207 is merged