{"name":"Web Font Display","slug":"web-font-display","version":"1.0","author":"AIS Technolabs","author_profile":"https://profiles.wordpress.org/aistechnolabspvtltd/","requires":"6.0","tested":"6.0.9","requires_php":false,"requires_plugins":[],"rating":60,"ratings":{"1":0,"2":0,"3":1,"4":0,"5":0},"num_ratings":1,"support_threads":0,"support_threads_resolved":0,"downloaded":2244,"last_updated":"2022-06-17 9:23am GMT","added":"2020-05-29","homepage":"https://wordpress.org/plugins/search/webfont-display/","sections":{"description":"

Webfont display plugin help you to resolve pagespeed insights error : “Ensure text remains visible during webfont load”.

\n","faq":"\n

\nHow it Works?\n\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.

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.

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’ in Google PageSpeed Insights

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

Note: Plugin can’t add font-display: swap to dynamically (via JS) injected Google Fonts

\nWhere can I find the settings configuration?\n\n

Just install the plugin and active it. No further configuration is needed.

\nHow to use this plugin for custom css?\n\n

You can use below mentioned css into your @font-face{font-display:swap}.

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() );

\n\n","changelog":"

1.0.0

Initial Release

\n","screenshots":"

$\"\"$

"},"download_link":"https://downloads.wordpress.org/plugin/web-font-display.zip","screenshots":{"1":{"src":"https://ps.w.org/web-font-display/assets/screenshot-1.png?rev=2314173","caption":""}},"tags":{"font-awesome-fonts":"font-awesome fonts","google-fonts":"google fonts","webfont-load":"webfont load"},"versions":[],"donate_link":"","icons":{"1x":"https://ps.w.org/web-font-display/assets/icon-128x128.png?rev=2314173"},"contributors":{"aistechnolabspvtltd":"https://profiles.wordpress.org/aistechnolabspvtltd/"}}

Web Font Display

Screenshots

Categories

Get New Themes & Resources