How to show an alternate font during web font loading periode?

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.



PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
User avatar
Markus
 
 
Posts: 113
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

How to show an alternate font during web font loading periode?

Post by Markus »

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.

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;
}
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

Code: Select all

  font-display: optional;
will block the loading process the least.

https://css-tricks.com/font-display-masses/

Thank you in advance.
Markus
User avatar
Pablo
 
Posts: 21577
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: How to show an alternate font during web font loading periode?

Post by Pablo »

The font-face code is generated by Google, the application has no control over this.
User avatar
Markus
 
 
Posts: 113
Joined: Fri Nov 23, 2018 1:06 pm
Location: Germanskow

Re: How to show an alternate font during web font loading periode?

Post by Markus »

Oh, how stupid, yes you're right. It's actually a CSS file that gets the page from Google.
Now that I'm looking at the source code, it's clear.

Code: Select all

<link href="css/font-awesome.min.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Lato:400,700,700,400" rel="stylesheet">
Image

Thanks Pablo
Post Reply