Ikabok
@Ikabok

Как правильно прописать font-display?

Есть сайт на вордпрессе. Через визуальный конструктор Elementor подключил себе три шрифта.
PageSpeed Insights ругается на то, что нужно использовать свойство font-display для того, чтобы пользователи могли видеть текст во время загрузки веб-шрифтов:

URL
Потенциальная экономия
…uploads/ptsans.woff2(lvsolutions.ru)
60 ms
…uploads/IBMPlexMono.woff2(lvsolutions.ru)
210 ms
…uploads/IBMPlexSans.woff2(lvsolutions.ru)
240 ms

Я зашел в style.css темы и прописал

@font-face {
  font-display: swap;
  font-family: "PT Sans";
  src: local('PT Sans'), local('PT Sans'), 
  url("https://lvsolutions.ru/wp-content/uploads/ptsans.woff2") format("woff2"), 
 
}

Но ошибка почему-то не уходит. Что я сделал не так?
  • Вопрос задан
  • 93 просмотра
Пригласить эксперта
Ответы на вопрос 1
@skeevy
Frontend WebDev
1. PageSpeed - не серебряная пуля. Это, в первую очередь, синтетика.
2. В отладчике включите троттлинг и смотрите, как ведут себя шрифты, если у вас нет текста - font-display попросту не работает
3. Убедитесь, что у вас сброшен кеш (как серверный, так и локальный) прежде чем тестировать
4. Вам не нужно использовать PageSpeed, у вас в Хроме уже есть LightHouse, к которому PageSpeed обращается. Так сказать, внешняя реализация того, что встроено уже в хром (не к вашему локальному, если что)
5. Возможно, у Вас недостаточно запасных шрифтов для отработки свапа. У вас идет обращение к локальным шрифтам, которых модет не быть. Я бы свапал на Roboto/Arial/serif/sans-serif.
6. Убедитесь, что у вас правильно написан фоллбек в src, включая отсылку на локальные шрифты
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
28 февр. 2021, в 01:35
200000 руб./за проект
28 февр. 2021, в 00:22
2500 руб./за проект
27 февр. 2021, в 22:14
30000 руб./за проект