{"id":122290,"date":"2020-05-29T05:27:01","date_gmt":"2020-05-29T05:27:01","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/web-font-display\/"},"modified":"2022-06-17T09:23:12","modified_gmt":"2022-06-17T09:23:12","slug":"web-font-display","status":"publish","type":"plugin","link":"https:\/\/lo.wordpress.org\/plugins\/web-font-display\/","author":17954281,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0","stable_tag":"trunk","tested":"6.0.11","requires":"6.0","requires_php":"","requires_plugins":"","header_name":"Web Font Display","header_author":"AIS Technolabs","header_description":"This plugin is use for improve [Google PageSpeed Insights](https:\/\/developers.google.com\/speed\/pagespeed\/insights\/) page speed. You can resolve \"Ensure text remain visible during web font load\" error for google fonts.","assets_banners_color":"857ac3","last_updated":"2022-06-17 09:23:12","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/wordpress.org\/plugins\/search\/webfont-display\/","header_author_uri":"http:\/\/aistechnolabs.com","rating":3,"author_block_rating":0,"active_installs":200,"downloads":2918,"num_ratings":1,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","faq","changelog"],"tags":[],"upgrade_notice":{"":"

Make sure you get the latest version.<\/p>"},"ratings":{"1":0,"2":0,"3":1,"4":0,"5":0},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":2314173,"resolution":"128x128","location":"assets","locale":""}},"assets_banners":{"banner-772x250.jpg":{"filename":"banner-772x250.jpg","revision":2314173,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":[],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":2314173,"resolution":"1","location":"assets","locale":""}},"screenshots":[],"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[186449,3778,186450],"plugin_category":[],"plugin_contributors":[185082],"plugin_business_model":[],"class_list":["post-122290","plugin","type-plugin","status-publish","hentry","plugin_tags-font-awesome-fonts","plugin_tags-google-fonts","plugin_tags-webfont-load","plugin_contributors-aistechnolabspvtltd","plugin_committers-aistechnolabspvtltd"],"banners":{"banner":"https:\/\/ps.w.org\/web-font-display\/assets\/banner-772x250.jpg?rev=2314173","banner_2x":false,"banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/web-font-display\/assets\/icon-128x128.png?rev=2314173","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/web-font-display\/assets\/screenshot-1.png?rev=2314173","caption":""}],"raw_content":"\n

Webfont display plugin help you to resolve pagespeed insights error : \"Ensure text remains visible during webfont load\".<\/p>\n\n\n

\n

How it Works?<\/h3><\/dt>\n

WebFont Display plugin will find all Google Fonts and font-awsome fonts in a webpage and set its font-display to swap property in your theme.<\/p>\n\n

If anyone add custom fonts using @font-face property into css file then they need to add this property into @font-face{font-display:swap;} css manually.<\/p>\n\n

By default browser will wait until the Google Fonts are downloaded to display the font. This is the reason for the error 'ensure text remains visible during webfont load'<\/strong> in Google PageSpeed Insights<\/a><\/p>\n\n

Luckily Google Fonts now supports setting font-display<\/code> via a new query parameter. By setting font-display<\/code> to swap, the browser uses the fallback font and when downloading actual font is complete, it just swaps the font!<\/p>\n\n

Note<\/strong>: Plugin can't add font-display: swap<\/code> to dynamically (via JS) injected Google Fonts<\/p><\/dd>\n

Where can I find the settings configuration?<\/h3><\/dt>\n

Just install the plugin and active it. No further configuration is needed.<\/p><\/dd>\n

How to use this plugin for custom css?<\/h3><\/dt>\n

You can use below mentioned css into your @font-face{font-display:swap}.<\/p>\n\n

This plugin is not working for my font-awesome \nFor that please check your font-awesome file is properly registered or not \nFor example: wp_enqueue_style( 'font-awesome', get_stylesheet_directory_uri() . '\/font-awesome\/css\/font-awesome.min.css', array() );<\/p><\/dd>\n\n<\/dl>\n\n\n

1.0.0<\/h4>\n\n
    \n
  • Initial Release<\/li>\n<\/ul>","raw_excerpt":"Webfont display plugin help you to resolve pagespeed insights error : "Ensure text remains visible during webfont load".","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/lo.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/122290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lo.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/lo.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/lo.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=122290"}],"author":[{"embeddable":true,"href":"https:\/\/lo.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/aistechnolabspvtltd"}],"wp:attachment":[{"href":"https:\/\/lo.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=122290"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/lo.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=122290"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/lo.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=122290"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/lo.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=122290"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/lo.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=122290"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/lo.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=122290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}