Page Speed. Подгрузка шрифтов

Question

По рекомендации гугла я использовал подгрузку шрифтов таким образом

<link rel="preload" href="<?= get_template_directory_uri()?>/assets/fonts/Pravda_Fixed_Pitch.otf" as="font" crossorigin>

Всё отлично, вот только шрифт этот использовать я не могу. То есть font-family: 'Pravda_Fixed_Pitch'; Не работает. Как решить эту проблему?

Answer 1

Не припомню, чтобы я подгружал шрифты в формате otf, однако часто были ttf, eot, svg, woof и даже woof2. И происходит это не от жиру, а потому что разные браузеры на разных платформах требуют разных форматов шрифтов. А кроме того, в css3 имеется отличный инструмент для подгрузки шрифтов, font-face называется. Использовать его в css можно как-ниббудь так:

@font-face {
  font-family: "OpenSans";
  font-weight: normal;
  font-style: normal;
    src: url("../fonts/OpenSansRegular/OpenSansRegular.eot");
    src: url("../fonts/OpenSansRegular/OpenSansRegular.eot?#iefix") format("embedded-opentype"), 
         url("../fonts/OpenSansRegular/OpenSansRegular.woff") format("woff"),
         url("../fonts/OpenSansRegular/OpenSansRegular.ttf") format("truetype");

Тут вам и разные типы шрифтов, но с одним и тем же начертанием подключить можно. И использовать затем можно именно указанное в свойстве font-familyназвание.

БЛОГ НА HUSL

Page Speed. Подгрузка шрифтов

Ответы (1 шт):