What is the correct way to display all text before loading fonts?

Question

css

Hello.
Google Pagespeed has this recommendation:
Set All Text to Show While Web Fonts are Loading
To allow the user to see text while the web fonts are not loaded, use the CSS font display feature.
The fonts are connected in the project like this:

@font-face {
  font-family: "Museo Sans";
  src: local('Museo Sans'), local('MuseoSans'), url("../fonts/museosans/regular.eot?#iefix") format("embedded-opentype"), url("../fonts/museosans/regular.woff2") format("woff2"), url("../fonts/museosans/regular.woff") format("woff"), url("../fonts/museosans/regular.ttf") format("truetype");
  font-display: swap;
}

That is, in fact, the recommendation is made, but Pagespeed still offers it. What am I doing wrong?

Answer 1

@font-face {
  font-display: swap;
  font-family: "Museo Sans";
  src: local('Museo Sans'), local('MuseoSans'), 
  url("../fonts/museosans/regular.eot?#iefix") format("embedded-opentype"), 
  url("../fonts/museosans/regular.woff2") format("woff2"), 
  url("../fonts/museosans/regular.woff") format("woff"),
  url("../fonts/museosans/regular.ttf") format("truetype");}

First, the loading rule is written, and then the font, and not vice versa

Answer 2

I guess you should use fallback fonts , maybe that will solve the problem.

Answer 3

Through trial and error, I found out that you need to specify the path to the font without../

Answer 4

1 the font must be connected in the header, and not from the css
2 the font in the body is indicated in the type form
that is, you need to specify not only the font that you will use, but also the font that will be used before the desired one is loaded, and if the desired one cannot be loaded for some reason.