[Hummingbird] Issue with font-display

I’m trying to set up font-display in Elementor. There’s a filter to change it to swap in recent version of Elementor, but it doesn’t seem to be working. Result still shows up in Google Insights.

  • Adam Czajczyk
    • Support Gorilla

    Hi Ghislain

    I hope you’re well today and thank you for your question!

    I checked your sites but I wasn’t able to make any significant test due to slight confusion. I can see in chat notes that the site you provided admin access (and WPMU DEV support access) is “aiki..eb.com” but we don’t have any cPanel or (S)FTP credentials to it so I can’t edit it and test the code or check server against any additional cache.

    You have allowed us to create ourselves SFTP accounts but the site is actually NOT hosted with us. You do have a site that seems to be the same at “aiki…eb.wpmudev.host” and I can create SFTP account for it but the “aiki..eb.com” domain is not directed to it. So that makes these two separate sites at the moment. The one that’s on our hosting doesn’t also have support access active.

    For further troubleshooting it would be great if you could open support access to the site hosted with us (assuming it’s exactly the same as the .com one) and I could test it there – since apparently the filter code from Elementor is not added there.

    Getting back to the issue itself. I run multiple tests on .com site with PageSpeed Insights and while the font-display issues is reported pretty much all the time, the interesting fact is that the set of fonts reported is not the same every time – it changes, sometimes there’s more fonts sometimes less.

    Additionally, I’m not quite sure if all these fonts actually do come from Elementor (for those that don’t, Elementor’s filter wouldn’t really work) so that would have to be tested too, as well as CSS checked.

    Furthermore, it’s not necessarily “swap” that will make it work – it might as well be e.g. “fallback” and that depends on the specific site.

    To sum it up:

    – could you please make sure that we are on the some side if it comes to which site should we actually be working with ( “.com” one or “.wpmudev.host” one)?

    – if it’s the one hosted with us – could you please enable support access to it by going to the “WPMU DEV -> support -> support access” page there and clicking on “Grant support access” button there?

    Looking forward to hear from you,
    Adam

  • Ghislain
    • Flash Drive

    Hi, sorry for the confusion.

    Yes the website hosted with you is a copy I used to make some tests but it can be used to troubleshoot the issue (I have enabled support access), as long as I have a way to apply the changes to my live website (this issue occur on all the websites I use Elementor).

    I also want to mentioned that I am facing a few other issues related to speed optimization on other websites as well, but I don’t know if I should add them to this post or create new ones for each.

    Some of those issues are related to smush cdn with webp conversion and resizing as well as this issue you mentioned where every test made with page insight is giving me different results even when no changes have been made (asset optimization, etc). If I’m not mistaking, those issues may have started after copying websites with Snapshots for test and redesign purpose…

    I’ll be happy to detail everything either here or another post. Please let me know.

    Thank you.

  • Adam Czajczyk
    • Support Gorilla

    Hello Ghislain

    Thank you for explanation and granting support!

    I worked on this again on your WPMU DEV hosted site and it seems that the Elementor’s code is actually working but the whole issue is not as simple as that. Let me explain :slight_smile:

    There are multiple different fonts and some are “native” to Elementor. Those are affected by the code. But
    – Elementor also loads FontAwesome and some other icon fonts
    – there are Google Web Fonts
    – and there are your custom fonts added via Elementor

    Those should be addressed as well but apparently not all can. So the “most” I could achieve here doesn’t eliminate issue entirely but there is significant difference and here are the steps:

    1) remove the code that you added on the live site first (the one from functions.php) file
    2) create empty PHP file (e.g. “elementor-swap-fonts.php”:wink: and copy and paste this code inside it:

    <?php 
    
    /* SET font-display to "swap" in Elementor */
    add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
    	return 'swap';
    }, 99, 3 );

    This is pretty much the same code but moved to mu-plugin (so it would be “theme independent”:wink: and executed with different priority (loaded later).

    3. Save the file and upload it to the “/wp-content/mu-plugins” folder of the site

    4. Install and activate this plugin on site, to address Google WebFonts:

    https://wordpress.org/plugins/swap-google-font-display/

    This plugin doesn’t have any settings, it only needs to be enabled.

    5. Go to “Elementor -> Tools” page and click on “Regenerate Files” button
    6. Go to “Hummingbird -> Dashboard” and click on “Clear cache” button

    7. If there’s any other/additional cache on the site (e.g. on server) – clear it as well.

    After that PageSpeed test should be showing less fonts listed in that fonts recommendation. That doesn’t actually affect the score significantly but still – deal partially with the issue. Note that there’s a difference between the fonts listed for “Mobile” and for “Desktop” views in PageSpeed but there’s not much that could be done about that.

    This, however, still leaves us with Font Awesome fonts, some (eicons) icon font from Elementor and Robot fonts (your custom font added via Elementor -> Custom Fonts).

    I’m afraid there’s no easy fix for Font Awesome. This has been ongoing issue with it for quite some time and apart from actually downloading SCSS, customizing and compiling it on your own – they seem to refuse to provide any reasonable solution.

    As for Elementor’s icon font (eicon) – I’m honestly not sure. I tried to find some way to deal with it but for some reasons it doesn’t seem to be affected by the code provided by Elementor and I didn’t find much information.

    As for Roboto – there would be a way. Instead of adding it as custom font through Elementor -> Custom Font, add use it as Google WebFont. Google does provide that font so if you add it instead as Google WebFont. In fact, I believe it should already be included in Elementor. If it was loaded from Google WebFonts, it would be addressed by the plugin that I suggested earlier and would also be removed from PageSpeed reccomendation.

    I’ll be happy to detail everything either here or another post. Please let me know.

    As for other issues, please try to keep them separate from each other, unless they are strictly related. This way we’ll be able to keep better track of them (and conversations) and help you faster and more accurately. So I’d suggest separate tickets :slight_smile:

    Best regards,
    Adam

  • Ghislain
    • Flash Drive

    Hi Adam. I’m sorry for the late reply! But thank you very much for the detailed explanation.

    I will take the time to continue testing and optimizing on this site as well before applying the changes to the live site.

    Thanks again!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.