How to download fonts quickly?

Question

css

Please do not laugh at the question and share your methods for quickly loading fonts.
A hypothetical situation: a crazy designer who drew layouts with three different fonts, each of which has 10 styles (and all of them are needed on the page).
You prescribed the magic pill as usual:

font-family:system-ui,-apple-system, BlinkMacSystemFont,  "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",   "Helvetica Neue", sans-serif;

converted non-standard fonts via transfonter, connected and see a typical bug: when loading the page, the default font is displayed first (1-2-3 seconds), and only then the non-standard one. How to be? ("put a preloader" do not offer)

Answer 1

1. First load the fonts that are used on the first screen, the rest asynchronously (like go to Google!)
2. If the font is Google, load from there anyway.
3. For the next project, try to use 2 additional fonts at most, your curls are not needed by anyone, except for the designer's sense of self-satisfaction. Ideal - ONE extra. font. Hint: Helevetica is not an add-on. font.
4. Send the designer to the vocational school.
Note: one font creates 3 to 6 requests to the server, multiply your 6 fonts by 6 requests, we get 36 requests, wow! The browser limit is already exceeded, so the user sits and sucks his paw, waiting for a miracle in the form of opening an unfortunate page ...
On a tablet, it will look like an endless page reload cycle, you can immediately exclude visitors with mobile traffic from statistics.

Answer 2

There are no miracles, the font needs to be loaded anyway. The fact that the first seconds the default fonts are shown is, as it were, normal. It's worse when nothing is shown at all.
You can try
font-display

Answer 3

First, why are you specifying so many fonts in font-family? you shouldn't use them that much. If so much is used - reduce to two or three, send the designer to the vocational school.
Secondly, how do I include fonts:
At the beginning of the CSS document, I have this (I gave SASS):

The code

@font-face {
      font-family: "MuseoSans";
      src: url("../fonts/MuseoSansRegular/MuseoSansRegular.eot");
      src: url("../fonts/MuseoSansRegular/MuseoSansRegular.eot?#iefix")format("embedded-opentype"),
      url("../fonts/MuseoSansRegular/MuseoSansRegular.woff") format("woff"),
      url("../fonts/MuseoSansRegular/MuseoSansRegular.ttf") format("truetype");
      font-style: normal;
      font-weight: 300;
  }

  @font-face {
      font-family: "MuseoSans";
      src: url("../fonts/MuseoSansBold/MuseoSansBold.eot");
      src: url("../fonts/MuseoSansBold/MuseoSansBold.eot?#iefix")format("embedded-opentype"),
      url("../fonts/MuseoSansBold/MuseoSansBold.woff") format("woff"),
      url("../fonts/MuseoSansBold/MuseoSansBold.ttf") format("truetype");
      font-style: normal;
      font-weight: 700;
  }

  @font-face {
      font-family: "MuseoSans";
      src: url("../fonts/MuseoSansItalic/MuseoSansItalic.eot");
      src: url("../fonts/MuseoSansItalic/MuseoSansItalic.eot?#iefix")format("embedded-opentype"),
      url("../fonts/MuseoSansItalic/MuseoSansItalic.woff") format("woff"),
      url("../fonts/MuseoSansItalic/MuseoSansItalic.ttf") format("truetype");
      font-style: italic;
      font-weight: 300;
  }

  @font-face {
      font-family: "MuseoSans";
      src: url("../fonts/MuseoSansLight/MuseoSansLight.eot");
      src: url("../fonts/MuseoSansLight/MuseoSansLight.eot?#iefix")format("embedded-opentype"),
      url("../fonts/MuseoSansLight/MuseoSansLight.woff") format("woff"),
      url("../fonts/MuseoSansLight/MuseoSansLight.ttf") format("truetype");
      font-style: normal;
      font-weight: 100;
  }

  @font-face {
      font-family: "MuseoSans";
      src: url("../fonts/MuseoSansMedium/MuseoSansMedium.eot");
      src: url("../fonts/MuseoSansMedium/MuseoSansMedium.eot?#iefix")format("embedded-opentype"),
      url("../fonts/MuseoSansMedium/MuseoSansMedium.woff") format("woff"),
      url("../fonts/MuseoSansMedium/MuseoSansMedium.ttf") format("truetype");
      font-style: normal;
      font-weight: 500;
  }

  @font-face {
      font-family: "MuseoSans";
      src: url("../fonts/MuseoSansBlack/MuseoSansBlack.eot");
      src: url("../fonts/MuseoSansBlack/MuseoSansBlack.eot?#iefix")format("embedded-opentype"),
      url("../fonts/MuseoSansBlack/MuseoSansBlack.woff") format("woff"),
      url("../fonts/MuseoSansBlack/MuseoSansBlack.ttf") format("truetype");
      font-style: normal;
      font-weight: 900;
  }

  @font-face {
      font-family: "MuseoSans";
      src: url("../fonts/MuseoSansBoldItalic/MuseoSansBoldItalic.eot");
      src: url("../fonts/MuseoSansBoldItalic/MuseoSansBoldItalic.eot?#iefix")format("embedded-opentype"),
      url("../fonts/MuseoSansBoldItalic/MuseoSansBoldItalic.woff") format("woff"),
      url("../fonts/MuseoSansBoldItalic/MuseoSansBoldItalic.ttf") format("truetype");
      font-style: italic;
      font-weight: 700;
  }

  @font-face {
      font-family: "MuseoSans";
      src: url("../fonts/MuseoSansMediumItalic/MuseoSansMediumItalic.eot");
      src: url("../fonts/MuseoSansMediumItalic/MuseoSansMediumItalic.eot?#iefix")format("embedded-opentype"),
      url("../fonts/MuseoSansMediumItalic/MuseoSansMediumItalic.woff") format("woff"),
      url("../fonts/MuseoSansMediumItalic/MuseoSansMediumItalic.ttf") format("truetype");
      font-style: italic;
      font-weight: 500;
  }

  @font-face {
      font-family: "MuseoSans";
      src: url("../fonts/MuseoSansLightItalic/MuseoSansLightItalic.eot");
      src: url("../fonts/MuseoSansLightItalic/MuseoSansLightItalic.eot?#iefix")format("embedded-opentype"),
      url("../fonts/MuseoSansLightItalic/MuseoSansLightItalic.woff") format("woff"),
      url("../fonts/MuseoSansLightItalic/MuseoSansLightItalic.ttf") format("truetype");
      font-style: italic;
      font-weight: 100;
  }

  @font-face {
      font-family: "MuseoSans";
      src: url("../fonts/MuseoSansBlackItalic/MuseoSansBlackItalic.eot");
      src: url("../fonts/MuseoSansBlackItalic/MuseoSansBlackItalic.eot?#iefix")format("embedded-opentype"),
      url("../fonts/MuseoSansBlackItalic/MuseoSansBlackItalic.woff") format("woff"),
      url("../fonts/MuseoSansBlackItalic/MuseoSansBlackItalic.ttf") format("truetype");
      font-style: italic;
      font-weight: 900;
  }

You can take it out into a separate file and load it first (I don’t do this, because there is no need).
The most commonly used font is written in the body:

body {
font-family: 'MuseoSans', Arial, sans-serif;
font-weight:300;
font-style:normal;
}

For the second font (if used), you define it already in the classes themselves (you can combine them and register them all at once).
Actually everything.
PS Do not forget that for the normal display of fonts, you need to collect all types of font files (otf, ttf, svg). Use the same name for the included fonts, only the value of font-weight, font-style (boldness and font style) should change.

Answer 4

The main delay has to do with when the browser decides to download resources, how long it takes, and when the browser is ready to render.
Google Tips: Web Font Optimization
CSS unicode-range can speed up the reading of glyphs from a font in a specific range of the alphabet without having to download the entire table.