• Hi,

    I have added the font rules in Asset Cleanup to force the font-display to swap and overwrite any settings (Settings -> Local Fonts -> First Option.

    I then ran the WPMU Hummingbird Pro test and it is showing I don’t have the option enabled. I can’t figure out what I am doing wrong ??

    Overview
    When you use web fonts on your website, browsers have to download them before any text can be displayed. Most browsers have a maximum timeout, after which a web font will be replaced with a fallback font. It’s recommended to use a font-display descriptor in your @font-face rule to control how text renders when web font download delays occur.

    Status
    Your page is not using font-display rule when loading the following web fonts.

    Font URL Savings
    https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2 5 ms
    https://plusoneflyers.tempurl.host/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.woff2?5.11.0 102 ms
    https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2 4 ms
    How to fix
    To add the font-display property for Google Fonts, you can pass the desired value in the query string display parameter as shown in the example below:

    https://fonts.googleapis.com/css?family=Roboto&display=swap
    For fonts hosted locally, add the font-display property to the @font-face CSS rule as shown below:

    @font-face{
    font-family: ‘myWebFont’;
    font-display: swap;
    src: url(‘myfont.woff2’) format(‘woff2’);
    }
    The font-display supports “auto | block | swap | fallback | optional” values. Try different values to achieve the desired result. You can read about the different values here.

    Additional notes
    It’s not possible to change the @font-face CSS rule for web fonts hosted with most external services. You should confirm if there is a way to specify the font-display rule with your font hosting service.`

  • The topic ‘Font Display ISsue’ is closed to new replies.