We're merging with GenerateBlocks! Learn more here.

[Resolved] Ensure text remains visible during webfont (wp-show-posts.ttf)

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Ensure text remains visible during webfont (wp-show-posts.ttf)

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #25245
    Charbel
    Participant

    Hello Tom,

    I have enabled Social in WP Show Posts Pro for my homepage (posts) and Google now starts complaining about the font below.

    Ensure text remains visible during webfont load: plugins/wp-show-posts-pro/fonts/wp-show-posts.ttf?ka575c

    Please note that I am using Font Awesome plugin which has now SVG icon instead of Web Font.
    I was able to place the social icons in the Menu using SVG, and this helps to get rid of this warning: text remains visible during webfont load.
    Could you please advise if we could use SVG for the social icons in WP Show Post PRO instead?
    http://wpcharbelnemnomblog.northeurope.cloudapp.azure.com/

    Thank You!
    -Charbel

    #25255
    elvin
    Moderator

    Hi,

    You can try preloading the font as recommended on Google PSI reports.
    https://web.dev/font-display/?utm_source=lighthouse&utm_medium=unknown

    I believe this topic has a similar issue to address. See David’s reply.
    https://wpshowposts.com/support/topic/preload-key-requests/#post-21876

    #25257
    Charbel
    Participant

    Thank you @Elvin,

    How can I add what David Suggested to the WP_Head Hook?

    Thank You!
    -Charbel

    #25259
    Charbel
    Participant

    I have GeneratePress Premium installed.

    #25274
    Charbel
    Participant

    Hello @Elvin

    Please note that I have followed exactly what David noted in the article you shared, but Google is still complaining about this font:

    Here is the wp_head Hook that I created under Elements.

    <link rel="preload" href="http://wpcharbelnemnomblog.northeurope.cloudapp.azure.com/wp-content/plugins/wp-show-posts-pro/fonts/wp-show-posts.ttf?ka575c" as="font" crossorigin="anonymous">

    Your help is highly appreciated!

    Thank You!
    -Charbel

    #25291
    elvin
    Moderator

    Hi,

    Can you try removing ?ka575c from the url in the href? So it would be something like this:

    <link rel="preload" href="http://wpcharbelnemnomblog.northeurope.cloudapp.azure.com/wp-content/plugins/wp-show-posts-pro/fonts/wp-show-posts.ttf" as="font" crossorigin="anonymous">

    Let us know. πŸ˜€

    #25307
    Charbel
    Participant

    Hello @Elvin

    I followed exactly what you noted above and removed ?ka575c, now Google is showing this Warning:

    Ensure text remains visible during webfont load
    Warnings: Lighthouse was unable to automatically check the <code>font-display</code> value for the origin http://wpcharbelnemnomblog.northeurope.cloudapp.azure.com.

    Please advise?

    Thank You!

    #25314
    elvin
    Moderator

    Can we try a different approach?

    Try adding font-display: swap; to the @font-face{...} on your WP Show Posts Pro’s wp-show-posts.css and wp-show-posts.min.css files.

    Here’s a demo video on how to do it:
    https://share.getcloudapp.com/NQuKXmjP

    Let us know.

    #25335
    Charbel
    Participant

    Hello @Elvin,

    Thank you for your support.
    My question here is, if we followed the approach you mentioned above, what will happen on the next plugin update it will overwrite our changes, right?
    So, it’s difficult to keep changing.

    What about the next option that you suggested?
    Could you please give more details on how to do this?

    You can try applying your font awesome font-family name SVG url on this CSS:

    .wpsp-twitter:before {
        font-family: 'your font family here';
        content: url(your_twitter_svg_file_here.svg);
    }
    
    .wpsp-facebook:before {
        font-family: 'your font family here';
        content: url(your_facebook_svg_file_here.svg);
    }

    Thank You!

    #25370
    elvin
    Moderator

    Thank you for your support.
    My question here is, if we followed the approach you mentioned above, what will happen on the next plugin update it will overwrite our changes, right?
    So, it’s difficult to keep changing.

    Ah that’s true. This is a temporary workaround until the next version.

    But you don’t have to worry about this too much as there are big changes coming for WP Show Posts as there are plans to rebuild the plugin as a block from scratch this year. πŸ™‚

    This may as well be added by default on the next one. πŸ™‚

    #25386
    Charbel
    Participant

    Thank you @Elvin!

    By adding font-display: swap; to the @font-face{...} on your WP Show Posts Pro’s wp-show-posts.css and wp-show-posts.min.css files solved the issue with Google PSI.

    Looking forward for the upcoming big change for WP Show Posts so I don’t have to worry about this with every update.

    Many Thanks @Elvin!

    #25392
    elvin
    Moderator

    Looking forward for the upcoming big change for WP Show Posts so I don’t have to worry about this with every update.

    I’ve actually logged this on the github page for Tom to check and eventually add to the roadmap for the future versions. He’s already been made aware of this. πŸ™‚
    https://github.com/tomusborne/wp-show-posts/issues/31

    No problem. πŸ™‚

    #25394
    Charbel
    Participant

    Thank You @Elvin, much appreciated!

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.