Fix Ensure text remains visible during webfont load

[Longkt]

Using Google PageSpeed Insight

[shrimp2t]

User comment:

How to implementate this:

Ensure text remains visible during webfont load

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/montserrat/v24/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2 5 ms https://www.contmanps.com/wp-content/themes/onepress/assets/fonts/fontawesome-webfont.woff2?v=4.7.0 3000 ms https://fonts.gstatic.com/s/montserrat/v24/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.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.