How to download fonts correctly?

Question

css

Good afternoon, there was a question about the correct preloading of the font, please help me figure it out

Google Page Speed ​​writes that the fonts specified in css interfere with rendering because of this type, the indicators fall if the fonts are connected like this:

@font-face {
    font-family: Lora;
    font-display: swap;
    src: local("Lora Italic"), local("Lora-Italic"), 
         url(/fonts/lora/Lora-Italic.woff2) format("woff2"), 
         url(/fonts/lora/Lora-Italic.woff) format("woff");
    font-weight: 400;
    font-style: italic;
}

it seems like the browser loads the css file, parses and then queues the font files to be loaded from css

and it turns out that the solution will be to prescribe the fonts in the header

<link rel="preload" href="/fonts/lora/Lora-Italic.woff2" as="font" type="font/woff2" crossorigin>

so it will load the font even before css

It turns out from css it is necessary to remove @font-face connection strings?
How then to address this font?
If not removed, won't it download the font twice?

Answer 1

I think that for "correctness" one should be guided by the fact that you need to load only those fonts that are required and avoid FOS (flash of a regular font) - load the font before the block in which it is used and load synchronously.
And so, at your discretion and taking into account the structure / architecture of the page / application:
, @font-face{}, by direct url, from localstorage, in the form of base64.
Along the way, directly in the html code - 100% guarantees loading exactly where it is written and exactly at the time of the call. But you need to take into account the size of such pieces and the fact that such code will look scary. But 1-2 fonts can be uploaded...