Zheleznov
@Zheleznov

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

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

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?
Как тогда обращаться к этому шрифту?
Если не удалять, он не загрузит шрифт дважды?
  • Вопрос задан
  • 116 просмотров
Пригласить эксперта
Ответы на вопрос 1
@zombtron
Я думаю, что для "правильности" нужно руководствоваться тем, что загружать нужно только те шрифты, которые требуются и избегать ВОШ (вспышка обычного шрифта) - загружать шрифт перед блоком, в котором он используется и загружать синхронно.
А так, на ваше усмотрение и с учетом структуры/архитектуры страницы/приложения:
, @font-face{}, по прямому url, из localstorage, в виде base64.
По ходу, непосредственно в хтмл-коде - 100% гарантирует загрузку именно там, где прописано и именно в момент вызова. Но нужно учитывать размер таких кусков и то, что такой код выглядеть будет страшно. Но 1-2 шрифта загрузить можно...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы