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

Question

[Ikabok]

Есть сайт на вордпрессе. Через визуальный конструктор 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"), 
 
}

Но ошибка почему-то не уходит. Что я сделал не так?

Comments

[Softlink]

а для шрифтов IBMPlexMono и IBMPlexSans сделали то же самое?

[Ikabok]

Softlink, нет, потому что ошибка с PT Sans не уходит.

[Softlink]

Ikabok, так сложно сказать. Кажется, гугл еще просит использовать для шрифтов preolad, но не знаю насколько все это связано.

Answer 1

[Mikhail Derkach]

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