Icons Font Display Swap #10095

jonathansoltero · 2020-01-08T22:18:52Z

Prerequisites

I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
The feature is still missing in the latest stable version of Elementor ( Elementor Pro. )

What problem is your feature request going to solve? Please describe.
PageSpeed Insights "Ensure text remains visible during webfont load" Fonts being loaded by Elementor such as the icons are causing a 1-second delay in load time.

I am not referring to custom fonts from Elementer Pro, I am referring to the bundled icons/fonts with Elementor, paths such as:

/elem/assets/lib/font-awesome/webfonts/fa-solid-900.woff2
/elem/assets/lib/eicons/fonts/eicons.woff2?5.5.0

Describe the solution you'd like
Adding font-display: swap;

Update: Font Awesome did this themselves, just update to the latest version 5.15

Describe alternatives you've considered
I have added the code in myself but they were removed after the update. I don't want to keep manually adding the font display.

Additional context
Add any other context or screenshots about the feature request here.

The text was updated successfully, but these errors were encountered:

stannvanheusden · 2020-01-21T09:06:12Z

I second this. Not only for internal fonts: also for Google Fonts, TypeKit etc.

jdub850000 · 2020-02-25T14:06:46Z

Thirded!

dineshmistry · 2020-03-26T15:34:59Z

Fourth!

add font-display: swap to Font Awesome; improves site score in Google Page Speed Insights (see also: https://web.dev/font-display/ and issue elementor#10095)

draconnia · 2020-07-15T09:28:49Z

On the one hand Lighthouse tells us to use font-display: swap and delays the load
On the other hand, we are told that font-display: swap is not ideal for an icon font, because there's no benefit in showing the character in a fallback typeface.
What can we do?

visrey · 2020-10-05T21:42:25Z

I think this issue is fixed in the latest release of font awesome refer the ticket

FortAwesome/Font-Awesome#16077

Upgrading the font-awesome version to 5.13 should fix the issue.

jonathansoltero · 2020-10-29T03:41:39Z

I think this issue is fixed in the latest release of font awesome refer the ticket

FortAwesome/Font-Awesome#16077

Upgrading the font-awesome version to 5.13 should fix the issue.

What version is Elementor on now?

jonathansoltero · 2020-10-29T03:56:27Z

Can we also consider adding <link rel=preload>

visrey · 2020-10-30T14:24:40Z

I have replaced the copies locally in my wordpress with version 5.13 copies and it worked 👍

shaneonabike · 2020-11-09T19:44:50Z

Also there is already a hook for this so we simply need to append display=swap or whatever setting we wish and Google creates the appropriate css. I attempted to override the existing stylesheet but it seems to never make it in the enqueue even when I set my priority super low :/

Please this would be a super easy change to hook into your existing filter created for local fonts.

visrey · 2020-11-15T08:28:35Z

It won't work the way you think display=swap won't work for font-awesome.
Understand the issue with font-awesome before suggesting the solution.
Actual issue and solution can be found in the issue created at font-awesome
FortAwesome/Font-Awesome#16077

Issue is because of font-awesome not with elementor.

shaneonabike · 2020-11-16T12:55:48Z

I saw that there were other comments relating to this being added for Google fonts too so that's why I added my comment. Maybe could I suggest you change the ticket title so that it's more clear that it relates to icons? Or just Font Awesome. Cause really it's not solved and the title implies more of a global (applies to all not covered) approach?

jonathansoltero · 2020-11-16T19:33:10Z

I saw that there were other comments relating to this being added for Google fonts too so that's why I added my comment. Maybe could I suggest you change the ticket title so that it's more clear that it relates to icons? Or just Font Awesome. Cause really it's not solved and the title implies more of a global (applies to all not covered) approach?

There I have added Icons to the title, like visrey said, Font Awesome has already done the updates to make lighthouse happy, Elementor just needs to stay up to date, Font Awesome resolved this in March.

shilo-ey · 2021-03-21T14:45:21Z

This feature has been released in Elementor v3.1.

Please feel free to update

joshcummingsdesign · 2021-04-15T23:39:44Z

This issue still exists for Elementor icons.

Running Lighthouse shows the following:

Ensure text remains visible during webfont load
../fonts/eicons.woff2?5.11.0

Confirmed that adding font-display: swap to the @font-face rule in elementor-icons.css resolves the issue. Happy to make a PR if this is a valid solution.

pavosdijital · 2021-05-06T13:12:21Z

This issue still exists for Elementor icons.

Running Lighthouse shows the following:
Ensure text remains visible during webfont load
../fonts/eicons.woff2?5.11.0
Confirmed that adding font-display: swap to the @font-face rule in elementor-icons.css resolves the issue. Happy to make a PR if this is a valid solution.

Can you please write the code exactly how it should be so I can add to my website. I am not very familiar with coding so your help is most appreciated. thank you

berkmh · 2021-05-06T15:32:39Z

This issue still exists for Elementor icons.
Running Lighthouse shows the following:
Ensure text remains visible during webfont load
../fonts/eicons.woff2?5.11.0
Confirmed that adding font-display: swap to the @font-face rule in elementor-icons.css resolves the issue. Happy to make a PR if this is a valid solution.
Can you please write the code exactly how it should be so I can add to my website. I am not very familiar with coding so your help is most appreciated. thank you

need same

JennyPower · 2021-05-11T09:56:59Z

Confirmed still an issue

Holland1 · 2021-05-18T19:54:49Z

Indeed, still an issue. Hope this will be fixed soon

joshcummingsdesign · 2021-05-19T22:06:22Z

I created #15014 to resolve this issue.

jkplkjm · 2021-06-03T23:27:21Z

I created #15014 to resolve this issue.

I tried this directly modifying the css and .min.css files under wp-content/plugins/elementor/assets/lib/eicons/css/ however, it didn't work. I'm not entirely sure why, but my browser is requesting the .woff2 icons with query parameter ?5.10.0 instead of ?5.11.0, and it doesn't work even when adding the new urls.

yerba69 · 2021-06-11T15:31:13Z

I created #15014 to resolve this issue.

I tried this directly modifying the css and .min.css files under wp-content/plugins/elementor/assets/lib/eicons/css/ however, it didn't work. I'm not entirely sure why, but my browser is requesting the .woff2 icons with query parameter ?5.10.0 instead of ?5.11.0, and it doesn't work even when adding the new urls.

I'm having the same issue on my end.

jonathansoltero · 2021-06-13T21:42:29Z

I created #15014 to resolve this issue.

I tried this directly modifying the css and .min.css files under wp-content/plugins/elementor/assets/lib/eicons/css/ however, it didn't work. I'm not entirely sure why, but my browser is requesting the .woff2 icons with query parameter ?5.10.0 instead of ?5.11.0, and it doesn't work even when adding the new URLs.

           Yeah same here, it seems to only show up for mobile

jonathansoltero · 2021-06-22T19:05:16Z

Nevermind it looks like it's also affecting desktop

StiefTschobbs · 2021-06-25T08:46:45Z

It affects desktop and mobile for my website.. all changes on the .css & min.css do not change anything.. so how could we tackle that issue?

Hynek-O · 2021-07-07T10:28:45Z

Confirmed still an issue.

Salimoh · 2021-08-25T21:51:39Z

Still getting this error on PSI for elementor 3.4

oliveandlake · 2021-09-03T14:00:15Z

Yes, also still getting this error. Seems to be no way to remove eicons.

shilo-ey · 2021-09-05T05:57:24Z

We are planning on releasing a new e-icons loading method that will eliminate this issue (inline SVG)

Thanks

rafaviana · 2021-09-09T10:09:28Z

We are planning on releasing a new e-icons loading method that will eliminate this issue (inline SVG)

Thanks

Great news! Looking for it 😉

boobo94 · 2021-10-22T18:57:46Z

any updates on this? Thanks

EXECdesign · 2021-11-12T07:39:38Z

#15897
Still the same issues in EP 3.5.1: eicons.woff2?5.10.0 gets loaded, Google Lighthouse test fails.

llavillaccama · 2021-11-24T14:27:30Z

Same problem someone managed to fix it

alibori · 2021-12-03T14:15:15Z

Hello!
Same problem with eicons on Page Speed Insights.

jonathansoltero · 2021-12-09T07:12:43Z

Yeah still not fixed.

yerba69 · 2021-12-16T17:49:00Z

Issue looks to be resolved in the most recent version of Elementor 😎

…

Sent from my iPhone

On Dec 9, 2021, at 1:12 AM, Jonathan ***@***.***> wrote: Yeah still not fixed. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

Salimoh · 2021-12-18T16:29:55Z

Does anybody else have problem with the cart icon after this update?
Cart icon no longer show in my client website
screenshot is here

yerba69 · 2021-12-18T17:20:39Z

Just noticed that as well…..

…

On Dec 18, 2021, at 10:30 AM, Salman Mohammadi ***@***.***> wrote: Does anybody else have problem with the cart icon after this update? Cart icon no longer show in my client website — Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you commented.

EXECdesign · 2021-12-20T08:25:14Z

This is what I get by testing Elementor 3.5.0:

It's a very slim site with WP 5.8.2 and EP 3.5.2 running with PHP 8.0.13.
After rollback to Elementor 3.4.8 everything works fine again instantly (Edit: Font Awesome Inline ACTIVE).

What can be so difficult regarding those Eicons that there's another trouble about it update after update?

tamal-sen · 2022-04-07T14:51:59Z

Hope the fix will be implemented soon. I have tried the Inline SVG method which is currently in alpha stage. That messed up my fonts so I had to revert.

asfo · 2023-06-17T23:45:47Z

So, this was closed but not fixed? I mean I'm posting this on June 17, 2023 and the issue is still there ...any workaround here?

JanWebofka · 2023-10-09T21:35:18Z

Hello,

/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.woff2?5.23.0

still issue.

jankohoener pushed a commit to jankohoener/elementor that referenced this issue Apr 2, 2020

Update font-awesome.min.css

b375029

add font-display: swap to Font Awesome; improves site score in Google Page Speed Insights (see also: https://web.dev/font-display/ and issue elementor#10095)

jankohoener mentioned this issue Apr 2, 2020

Add font-display: swap to Font Awesome for better Google Page Speed Insights score #11037

Closed

8 tasks

jonathansoltero mentioned this issue Jul 24, 2020

Font Display Swap #9982

Closed

2 tasks

jonathansoltero changed the title ~~Font Display Swap~~ Icons Font Display Swap Nov 16, 2020

DorShahar added the request/feature Indicates a Request for a non-existing New Feature. label Feb 14, 2021

shilo-ey added request/enhancement Indicates an Enhancement Request for an existing feature. type/performance Indicates when a topic is related to Performance. and removed request/feature Indicates a Request for a non-existing New Feature. labels Mar 14, 2021

shilo-ey closed this as completed Mar 21, 2021

joshcummingsdesign mentioned this issue May 19, 2021

Add font-display swap to eicons font-face rule #15014

Closed

10 tasks

Icons Font Display Swap #10095

Icons Font Display Swap #10095

Comments

jonathansoltero commented Jan 8, 2020 • edited

Prerequisites

stannvanheusden commented Jan 21, 2020

jdub850000 commented Feb 25, 2020

dineshmistry commented Mar 26, 2020

draconnia commented Jul 15, 2020

visrey commented Oct 5, 2020 • edited

jonathansoltero commented Oct 29, 2020

jonathansoltero commented Oct 29, 2020 • edited

visrey commented Oct 30, 2020 • edited

shaneonabike commented Nov 9, 2020

visrey commented Nov 15, 2020 • edited

shaneonabike commented Nov 16, 2020

jonathansoltero commented Nov 16, 2020

shilo-ey commented Mar 21, 2021

joshcummingsdesign commented Apr 15, 2021 • edited

pavosdijital commented May 6, 2021

berkmh commented May 6, 2021 • edited

JennyPower commented May 11, 2021

Holland1 commented May 18, 2021

joshcummingsdesign commented May 19, 2021

jkplkjm commented Jun 3, 2021

yerba69 commented Jun 11, 2021

jonathansoltero commented Jun 13, 2021

jonathansoltero commented Jun 22, 2021

StiefTschobbs commented Jun 25, 2021

Hynek-O commented Jul 7, 2021

Salimoh commented Aug 25, 2021

oliveandlake commented Sep 3, 2021

shilo-ey commented Sep 5, 2021

rafaviana commented Sep 9, 2021

boobo94 commented Oct 22, 2021

EXECdesign commented Nov 12, 2021

llavillaccama commented Nov 24, 2021

alibori commented Dec 3, 2021

jonathansoltero commented Dec 9, 2021

yerba69 commented Dec 16, 2021 via email

Salimoh commented Dec 18, 2021 • edited

yerba69 commented Dec 18, 2021 via email

EXECdesign commented Dec 20, 2021 • edited

tamal-sen commented Apr 7, 2022

asfo commented Jun 17, 2023

JanWebofka commented Oct 9, 2023

jonathansoltero commented Jan 8, 2020 •

edited

visrey commented Oct 5, 2020 •

edited

jonathansoltero commented Oct 29, 2020 •

edited

visrey commented Oct 30, 2020 •

edited

visrey commented Nov 15, 2020 •

edited

joshcummingsdesign commented Apr 15, 2021 •

edited

berkmh commented May 6, 2021 •

edited

Salimoh commented Dec 18, 2021 •

edited

EXECdesign commented Dec 20, 2021 •

edited