How to show an alternate font during web font loading periode?
Posted: Sun Sep 08, 2019 1:23 pm
I use a google web font configured via Google font manager in my website.
Now I notice that the loading speed of the website, measures with some online SEO test tools, is classified as too slow because of the web font. The SEO tools attest me a time of more than 3 seconds on mobile devices until the content is completely displayed.
As a remedy it is recommended to use the CSS option "font-display", so that the content is already visible in a standard font during the loading process of the web font.
In my research I found the following code where font-display is used.
Can I also use this technique when using the Google font manager and if so, in what form do I have to implement it in my page?
I think the setting
will block the loading process the least.
https://css-tricks.com/font-display-masses/
Thank you in advance.
Markus
Now I notice that the loading speed of the website, measures with some online SEO test tools, is classified as too slow because of the web font. The SEO tools attest me a time of more than 3 seconds on mobile devices until the content is completely displayed.
As a remedy it is recommended to use the CSS option "font-display", so that the content is already visible in a standard font during the loading process of the web font.
In my research I found the following code where font-display is used.
Code: Select all
@font-face {
font-family: "Open Sans Regular";
font-weight: 400;
font-style: normal;
src: url("fonts/OpenSans-Regular-BasicLatin.woff2") format("woff2");
font-display: swap;
}I think the setting
Code: Select all
font-display: optional;https://css-tricks.com/font-display-masses/
Thank you in advance.
Markus
