Как правильно загружать шрифты?

Question

[Evgeniy]

Добрый день, возник вопрос правильной предзагрузки шрифта, помогите пожалуйста разобраться

Google Page Speed пишет что шрифты прописанные в css, мешают отрисовки из-за этого типа показатели падают, если шрифты подключены так:

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

вроде получается браузер грузит css файл, парсит и потом ставит очередь загрузки файлов шрифтов из css

и выходит что решением будет прописать шрифты в header

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

так он загрузит шрифт ещё до css

Получается из css надо удалить строки подключения @font-face?
Как тогда обращаться к этому шрифту?
Если не удалять, он не загрузит шрифт дважды?

Comments

[Михаил]

preload не отменяет font-face

[Evgeniy]

Михаил, тогда в чем смысл?

[Михаил]

Evgeniy, в получении шрифта браузером как можно раньше

[Evgeniy]

Михаил, сказал как отрезал)

[Сергей delphinpro]

Evgeniy, preload указывает браузеру, что ресурс вскоре понадобится, и его следует загрузить как можно быстрее. Браузер начинает скачивать его параллельно, еще до того, как ресурс реально нужен.

[Алекс Глебов]

Если не удалять, он не загрузит шрифт дважды?

Если заголовки кеширования настроены, не загрузит второй раз

Answer 1

[zombtron]

Я думаю, что для "правильности" нужно руководствоваться тем, что загружать нужно только те шрифты, которые требуются и избегать ВОШ (вспышка обычного шрифта) - загружать шрифт перед блоком, в котором он используется и загружать синхронно.
А так, на ваше усмотрение и с учетом структуры/архитектуры страницы/приложения:
, @font-face{}, по прямому url, из localstorage, в виде base64.
По ходу, непосредственно в хтмл-коде - 100% гарантирует загрузку именно там, где прописано и именно в момент вызова. Но нужно учитывать размер таких кусков и то, что такой код выглядеть будет страшно. Но 1-2 шрифта загрузить можно...