Home › Forums › Pro Support › Ensure text remains visible during webfont (wp-show-posts.ttf)
Tagged: wp-show-posts.ttf
- This topic has 12 replies, 2 voices, and was last updated 2 years, 10 months ago by
Charbel.
-
AuthorPosts
-
January 11, 2021 at 12:13 am #25245
Charbel
ParticipantHello 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!
-CharbelJanuary 11, 2021 at 2:09 am #25255elvin
ModeratorHi,
You can try preloading the font as recommended on Google PSI reports.
https://web.dev/font-display/?utm_source=lighthouse&utm_medium=unknownI believe this topic has a similar issue to address. See David’s reply.
https://wpshowposts.com/support/topic/preload-key-requests/#post-21876January 11, 2021 at 2:17 am #25257Charbel
ParticipantJanuary 11, 2021 at 2:22 am #25259Charbel
ParticipantI have GeneratePress Premium installed.
January 11, 2021 at 4:36 am #25274Charbel
ParticipantHello @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!
-CharbelJanuary 11, 2021 at 6:17 pm #25291elvin
ModeratorHi,
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. π
January 11, 2021 at 11:57 pm #25307Charbel
ParticipantHello @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!
January 12, 2021 at 2:15 am #25314elvin
ModeratorCan we try a different approach?
Try adding font-display: swap; to the
@font-face{...}
on your WP Show Posts Pro’swp-show-posts.css
andwp-show-posts.min.css
files.Here’s a demo video on how to do it:
https://share.getcloudapp.com/NQuKXmjPLet us know.
January 12, 2021 at 7:33 am #25335Charbel
ParticipantHello @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!
January 12, 2021 at 6:50 pm #25370elvin
ModeratorThank 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. π
January 13, 2021 at 12:28 am #25386Charbel
ParticipantThank you @Elvin!
By adding font-display: swap; to the
@font-face{...}
on your WP Show Posts Proβswp-show-posts.css
andwp-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!
January 13, 2021 at 1:34 am #25392elvin
ModeratorLooking 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/31No problem. π
January 13, 2021 at 1:36 am #25394 -
AuthorPosts
- You must be logged in to reply to this topic.