Font Display ISsue
-
Hi,
I have added the font rules in Asset Cleanup to force the font-display to swap and overwrite any settings (Settings -> Local Fonts -> First Option.
I then ran the WPMU Hummingbird Pro test and it is showing I don’t have the option enabled. I can’t figure out what I am doing wrong ??
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/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2 5 ms
https://plusoneflyers.tempurl.host/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.woff2?5.11.0 102 ms
https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.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.Additional notes
It’s not possible to change the @font-face CSS rule for web fonts hosted with most external services. You should confirm if there is a way to specify the font-display rule with your font hosting service.`
- The topic ‘Font Display ISsue’ is closed to new replies.