Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1060548

    Hi
    According to Google Lighthouse (among others), fonts should apply CSS font-display feature to deal with FOUT/FOIT (more info here).

    For short, standard usage is to set the @font-face to font-display: swap for text-fonts (to prevent invisible text, uses fallback font) and font-display: block for icon fonts (to ensure the page hides the icon until properly downloaded and doesn’t show unicode nonsense until then).

    I still have to find a proper way to use this feature on Google Fonts (any help is welcome)
    but for now I am considering using font-display on Enfold entypo-fontello fonts and customs fonts uploaded in Enfold.
    Both load @font-face information at the end of <head> and I was able to add “font-display: block” in it by modifying /enfold/config-templatebuilder/avia-template-builder/php/font-manager.class.php, line 508.

    Now I have 2 questions:
    – how could I override this file properly in my child theme folder?
    – since this simple override is “static”, I can’t set a different value for font-display for each font if I ever need it (which I don’t for now). Do you plan to add support for font-display to Enfold anytime soon? You could think of some way of adding correct font-display settings by choosing -for example- if this is a text font or an icon font that you are uploading? Standard fontello-entypo should be on font-variant: block I guess but you could have another idea.

    I hope it will help Enfold and other users.
    Thank you

    #1061913

    Hey Julien,

    Thank you for sharing the details.

    The font display property can be applied to all supported font types by the web browser irrespective of icon fonts or type fonts.

    You do not have to modify any php files to apply the CSS code. Simply use the selector and add the CSS property in the enfold theme option or child theme styles.

    or just use a wild card selector to apply the code site wide.

    * {
        font-display: /* CSS property here */ ;
    }

    Best regards,
    Vinay

    #1061961

    Hi Vinay
    I’m sorry but you lost me somewhere. How do you apply the font-display property to a specific font?
    What would be the selector? I thought font-display was applied to @font-face

    #1062653

    Hi,

    Yes that is correct. Please refer to the video link for a better explanation about the font display.

    Best regards,
    Vinay

    #1062687

    so… how would you apply font-display to a specific font when loaded by Enfold?
    Let’s say I want to apply font-display: block to Entypo-Fontello loaded by Enfold. How would I do that?

    #1064090

    hi there, i have the same “problem” what he asks for is to set a “font-display: swap;” while loading the Fontello-Fonts locally.

    #1065219

    Hi,
    Sorry for the late reply, this looks like a solution for: (Purchase code hidden if logged out) /”>Google Fonts and font-display

    Best regards,
    Mike

    #1066469

    Hi Mike

    Well, I already knew this page but it’s not consistent with what Vinay said so I will just suppose he made a mistake with his suggestion?

    Furthermore, you didn’t reply to my initial questions:
    – how can I override the file /enfold/config-templatebuilder/avia-template-builder/php/font-manager.class.php on child-theme to prevent erasing on Enfold update? Already tried mimicking the folder hierarchy and it didn’t work.
    – do you plan to add font-display features on Enfold?

    From where I am now, I guess the easier way to add font-display features on Enfold would to be to use both the following methods:
    – Google Fonts: prevent Enfold to load them by not selecting Google Fonts in Theme Options / General Styling / Fonts (choose websave fonts), and self-host Google Fonts you need while adding font-display property yourself.
    – Icon fonts (Entypo-Fontello): hack font-manager.class.php as I said before (but I’d prefer a way to properly override the file in child-theme…)

    What do you think?

    #1066557

    Hi,

    Thank you for getting back to us. I’m sorry about the misunderstanding. In my previous message I shared a link to the video which explains the whole process but somehow the was missed. Here it is again :)

    1. You need not modify any php file to add the font display property to your theme.

    Edit the font name in the below code and paste the below code to the Quick CSS section in Enfold > General Styling

    @font-face {
      font-family: "YOUR FONT NAME";
      font-display: swap;
    }

    NOTE: To load the main theme js files from child theme please check this (Purchase code hidden if logged out) -script/# (Purchase code hidden if logged out) -folder” rel=”noopener” target=”_blank”>link. There is no easy way to(Purchase code hidden if logged out) ” rel=”noopener” target=”_blank”> load all the main theme php files from the child theme it’s a WordPress limitation. To get around this you can write custom functions. Since this is going to take a lot of time and customization it is out of our support scope and thank you for your understanding :)

    2. We update the theme regularly based on wider acceptance of the features on all modern browsers. You can surely expect this to be included in the future updates but we do not have an ETA on this at the moment.

    3. To host google fonts please check this (Purchase code hidden if logged out) ” rel=”noopener” target=”_blank”>link.

    4. For icon fonts you can use the following CSS code

    @font-face {
        font-family: 'entypo-fontello';	
        font-display: swap;
    }

    You can also check out this working example that demonstrates different fonts applied

    You may not see the changes until the cached files are cleared in your browser.

    Please perform the below steps to clear the browser cache:

    1. Disable “merging and compression” for CSS and JS files from Enfold > Performance.
    2. If a caching plugin is installed check the plugin settings and clear the cache and deactivate the plugins for testing purpose.
    3. Hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload”.

    Let us know if you have any questions we are happy to help you.

    Best regards,
    Vinay

    #1066599

    Hi Vinay
    Thank you for this long reply.
    Well, it didn’t work for me. Have you tested this tip?

    I guess I might have did something wrong, but before trying to understand what’s wrong on my side, are you able to show me a working example of your tip on an Enfold site?

    Because I’m not that sure that declaring a @font-face statement outside of its initial declaration will work (and I found nothing about it in your video nor codepen which only seems to mention initial declaration).

    Adding font-display: anything on your first declaration works, which is exactly what I did in hacking font-manager.class.php

    But adding

    @font-face {
        font-family: 'entypo-fontello';	
        font-display: block;
    }

    on another CSS file does not work on my sites.

    Does it on yours? Can you provide a working example?
    Thx

    #1067018

    Hi,

    Thank you for getting back us.

    You can try the WP enqueue method mentioned earlier (Find the links in the previous message). Please note loading the main theme files after child theme styles may lead to FOUC Flash of unstyled content. Please feel free to try it on your installation to know if this works for you.

    At the moment there is no other easy way to add this modification to your site. Unfortunately, it would require quite some time and customization of the theme to edit core files to achieve this, so I am sorry to tell you that this is not covered by our support. However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)

    Best regards,
    Vinay

    #1068296

    Ok, thank you for your time.

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.